Advance Ajax Product Filters in PHP

hello friends this is webs lesson web development tutorial on PHP with Ajax and here we have discussed how to make product filter in PHP using Ajax jQuery with my SQL we have already published product filter by using jQuery price range slider in that video when user has changed price range then it will filter product which have come between minimum and maximum price range but there are many viewers has requested us to make video on product filter not only with price range but also product must be filter on checkbox check so here we have make an advanced product filter using PHP with Ajax for mobile item in which user can filter mobile on price mobile brand Mobile RAM and mobile storage capacity if we have visit any eka murse website in which we can see product and for search particular product we can find different type of filter option so we can easily filter product according to our requirement so this type of feature we have make here you now let's start discussing this topic this is our testing database in which we have one product table with table column like product ID product name product brand product price product Ram product storage product camera product image product quantity and product status in this table we have already inserted some data of mobile phone so we will fetch data from this table display on web page and make advanced PHP Ajax filter this is our index page in which we have already imported JavaScript jQuery library bootstrap library and jQuery user interface library link we will use functionality of all library first we have go to database connection dot PHP file and here we have write dollar connect variable is equal to new class with my SQL host is equal to local host database name is equal to testing username set to root and password set to blank you after making database connection we have go to index page and here we have write include statement with database connection dot PHP this code will make database connection on this page now we have moved to write HTML code so here first we have write input type is equal to hidden field with ID is equal to hidden minimum price with value is equal to zero under this variable we will store minimum price range of slider below this we have right input type is equal to hidden with ID is equal to hidden maximum price and value is equal to 65,000 in this field we will store maximum price of price range slider after this we have repaired graph tag with ID is equal to price show with text like 1000 - 65 thousand this text will be changed when we have moved price range slider for display jQuery slider here we have right division tag with ID equal to price range under this tag we will display jQuery slider with minimum and maximum price this block of code for price range now we want to display all mobile phone brand name with checkbox for filter mobile phone according to particular brand so here we have right dollar query variable is equal to select distinct product brand table column from product where products status is equal to one order by product ID in descending order this query will return all mobile phone brand name so below we have right dollars statement variable is equal to dollar Connect variable with preparer statement and under this we have right dollar query variable it will make query for execution for query execution we have rightt dollars statement variable with execute method this method will execute query after this we have right dollar result variable is equal to dollar statement variable with fetch all method this method will fetch query execution data and store under dollar result variable now we have right for each loop with dollar result variable as dollar row variable by using for each loop it will fetch data from dollar result variable under this loop we have right division tag with classes equal to list group item and check box under this tag we have right input type is equal to checkbox class is equal to common selector and brand value is equal to dollar row product brand variable and in text also we have right dollar row product brand variable this code will display all brand name with checkbox on webpage now we have C output in browser friends here we can see when page has been load into browser then here we can see mobile phone brand list with checkbox by selecting particular brand checkbox user can filter mobile phone on webpage now we have go to index page and here we want to display list of mobile phone RAM size on webpage so user can filter mobile phone according RAM size so here we have right dollar query variable is equal to select distinct product RAM from product where product status is equal to one order by product Ram in descending order this query returned all RAM of mobile phone below this we have right dollars statement variable is equal to dollar Connect variable with preparer statement and under this we have right dollar query variable it will make query for execution for query execution we have rightt dollars statement variable with execute method this method will execute query after this we have right dollar result variable is equal to dollar statement variable with fetch all method this method will fetch query execution data and store under dollar result variable now we have right for each loop with dollar result variable as dollar row variable by using for each loop it will fetch data from dollar result variable under this loop we have right division tag with classes equal to list group item and check box under this tag we have right input type is equal to check box class is equal to common selector and RAM value is equal to dollar row product Ram variable and in text also we have right dollar row product Ram variable this code will display all mobile phone RAM with checkbox on webpage now we have C output in browser friends here we refresh page and after this here we can see mobile phone brand list and mobile phone RAM with checkbox by selecting particular brand and RAM size checkbox user can filter mobile phone on webpage now we have go-to index page and here we want to display list of mobile phone internal storage size on webpage so user can filter mobile phone according internal storage size so here we have right dollar query variable is equal to select distinct products storage from product where products status is equal to one order by product storage in descending order this query returned all size of storage of mobile phone below this we have right dollars statement variable is equal to dollar Connect variable with preparer statement and under this we have right dollar query variable it will make query for execution for query execution we have rightt dollars statement variable with execute method this method will execute query after this we have right dollar result variable is equal to dollar statement variable with fetch all method this method will fetch query execution data and store under dollar result variable now we have right for each loop with dollar result variable as dollar row variable by using for each loop it will fetch data from dollar result variable under this loop we have right division tag with classes equal to list group item and check box under this tag we have right input type is equal to checkbox class is equal to common selector and storage value is equal to dollar row product storage variable and in text also we have right dollar row products storage variable this code will display all mobile phone internal storage size with checkbox on webpage now we have C output in browser friends here we refresh page and after this here we can see different mobile phone filter like brand RAM and internal storage with checkbox by selecting particular checkbox we can filter mobile phone details on web page now we have procede for a display all mobile phone on webpage so we have go to index page and here we have write division tag with classes equal to row and filter data under this tag we will display mobile phone on webpage so we have go to jQuery code and here we have make one filter/data function this function will fetch data from product table with filter and display on webpage under this function first we have right dollar with division tag class filter data with HTML method and under this we have right division tag with ID is equal to loading so when this function has been called then it will first display this tag and here we can see property of this tag like text-align set to centre in background we have display loader image and height set to 150 pixel after this we have right action variable is equal to fetch data here we have defined fetch mobile data action under this variable below this we have write minimum price variable is equal to dollar with input field ID hidden minimum price with value method so here we have store this field value under this minimum price variable same way we have defined maximum price variable is equal to dollar with input field ID hidden maximum price with value method so here we have store this field value under this maximum price variable now we have right brand variable is equal to get filter function with brand class name this function will return checkbox value of all selected brand which we have store under this brand variable first we have create get filter function with class name argument here in class name argument we will pass checkbox class like brand Ram or storage under this function we have right filter variable is equal to array under this variable we will store value of selected checkbox below this we have right dollar with class name argument with double : checked with each method by using this method we can access all attribute of selected checkbox of particular class under this function we have right filter variable dot push method and under this method we have right dollar this with value method here by using value method we have fetch value of selected checkbox and store under filter variable in array format lastly we have rightt return statement with filter variable this is the output of this function now we have go-to filter data function and here we have right Ram variable is equal to get filter function with Ram class here we have store selected Ram data under this Ram variable same way below this we have right storage variable is equal to get filter function with storage class name here we have store selected checkbox value of storage filter which have store under storage variable now we have moved to right Ajax request and here we have right first option like URL option set to fetch data PHP here we have send request to this page in second option we have right method which has set to post here we have used post method for send data to PHP script in third option we have right data and in this option we can define which data we want sent to server so here we have right action minimum price maximum price brand RAM and storage variable value to server lastly we have write success callback function this function has been called if Ajax requests completed successfully and it will receive data from server under this function we have right dollar with division tag class filter data with HTML method with data this code will display mobile data on webpage now we have moved to write PHP code in fetch data dot PHP file and here we have write include statement with database connection dot PHP this code will make database connection on this page after this we have right if statement and under condition we have right is set function with dollar post action variable this condition will check if this variable has some value if this condition true then it will execute if block of code under this block we have right dollar query variable is equal to select star from product table where products status is equal to one here we have right simple select query for fetch all active product from product table for filter product data here first we have write if statement and under condition we have write is set function with dollar post minimum price and maximum price variable and not empty function with dollar post minimum price variable and not empty function with dollar post maximum price variable this condition will check this both variable has some value then it will execute if block of code under this block we have right dollar query variable and under this variable we have append query like and product price between value of dollar post minimum price and maximum price variable this query for filter mobile phone data based on this price range below this we have right if statement and under condition we have right is set function with dollar post brand variable if this variable value is set then it will execute if block of code under this block we have write dollar brand filter variable is equal to implode function with two arguments int Ummah : and dollar post brand variable this code will convert this variable value from a ray to string now we have right dollar query variable and in this variable we have append query like an product brand in dollar brand filter variable value this query is for filter mobile data based on brand below this we have again right if statement and under condition we have right is set function with dollar post Ram variable if this variable value is set then it will execute if block of code under this block we have right dollar Ram filter variable is equal to implode function with two arguments I call and comma colon and dollar post Ram variable this code will convert this Ram variable value from a rageous string now we have right dollar query variable and in this variable we have append query like and product Ram in dollar Ram filter variable value this query is for filter mobile data based on RAM size after this we have again right if statement and under condition we have right is set function with dollar post storage variable if this variable value is set then it will execute if block of code under this block we have rightt dollars storage filter variable is equal to implode function with two argument and comma colon and dollar post storage variable this code will convert the storage variable value from array to string now we have right dollar query variable and in this variable we have append query like and product Ram in dollar Ram filter variable value this query is for filter mobile data based on RAM size below this we have right dollars statement variable is equal to dollar Connect variable with preparer statement and under this we have right dollar query variable it will make query for execution for query execution we have rightt dollars statement variable with execute method this method will execute query after this we have right dollar result variable is equal to dollar statement variable with fetch all method this method will fetch query execution data and store under dollar result variable now we have right dollar total row variable is equal to dollar statement variable with row count function this function return' number of rows in query execution which has store under dollar total row variable after getting number of row so here we have right if statement and under condition we have right dollar total row variable greater than zero if this condition true then it will execute if block of code under this block we have right for each loop with dollar result variable as dollar row variable by using this loop we can fetch data from dollar result variable under this loop we have right dollar output variable and in this variable we have append HTML code you first we want to display mobile phone image so here we have right image tag with source is equal to image folder slash dollar Rho product image variable it will display mobile phone image after this we want to display product name so here we have right dollar row product name variable it will display product name on webpage then after we want to display product price so here we have right dollar row product price variable it will display product price on webpage same way we want to display mobile phone camera details so here we have right dollar row product camera variable it will display mobile phone camera details on webpage now we want to display mobile phone brand details so here we have right dollar row product brand variable it will display mobile phone brand detail on web page after this we want to display mobile phone RAM details so here we have write dollar row product RAM variable this code will display mobile phone RAM details on web page lastly we want to display mobile phone internal storage details so here we have right dollar row products storage variable so it will display mobile phone internal storage details on webpage so here we have store all data in dollar output variable now want to send this data to Ajax request so here we have write echo statement with dollar output variable it will display mobile phone data on webpage now we have go to index page and here we have called this filter data function so when has been load then it will execute this function and it will display mobile phone data on web page friends here first we have refresh page and after refresh of webpage here we can see all mobile phone data on webpage without any filter for filter this data we can see filter here but currently it will not display filter data for filter mobile phone we have go to index page and here we have right dollar with checkbox class common selector with click event this is common class of all filter checkbox so when we have click on any filter checkbox then it will execute this block of code under this block we have right called filter data function so when we have click on any filter checkbox then it will call this function and it will filter mobile phone data according to selected filter now friends first we have refresh page and after refresh of web page now we want to get only mobile phone with only Google brand so here we have select Google brand check box after click on this filter option then on webpage we can see only Google brand mobile on webpage same way we want to display all mobile phone of honor with four gigabyte RAM so here we have select honor brand and here in RAM filter we have select 4g gabite after selecting both filter then on web page we can this mobile phone according to filter now we want add price range filter also so we have go-to index page and we have go-to jQuery code part and in this first we want to activate jQuery slider plug-in so for this we have rightt division tag ID price range with slider method this method will activate jQuery slider plug-in on to find a vision tag under this first we have right range option set to true this option will represent a range on slider option we have right minimum this option to find minimum value of the slider which is 1000 after this we have right maximum option this option to find the maximum value of the slider which is 65,000 below this we have right values option so in this option we have to define two value because here we have range option set to true so here we want to define minimum and maximum value of range slider which is one thousand and sixty-five thousand after this we have right step option and here we have right 500 this option is for when we have slide slider than it will directly change 500 on every slider slide left or right now we have right stop event with function with two arguments like event and user interface this event will be triggered when Mouse moves stop when Mao stopped to move on slide then at that time we want to display mobile phone with price come between this minimum and maximum price range first we have right dollar with division tag with price show with HTML method and under this we have right you I dot value zero index - you i dot values one index this code will display currently value of minimum and maximum price after this we have right dollar with input field hidden minimum price with value method and under this we have right you i dot values zero index here we have store minimum range value under this hidden field same way we have right input filled with ID hidden maximum price with value method and under this we have write UI Dot values one index here we have store current value of maximum value of range under this hidden field lastly we have called filter data function this function will fetch minimum and maximum price from hidden field and filter mobile phone data according selected filter on webpage now we have check output in browser friends first we have refresh webpage and after refresh of webpage now we want to display mobile phone whose price is less than twenty thousand so here we have slide maximum range - twenty-five thousand after this we can see mobile phone with price less than or equal to 25,000 now from this we want to filter only honor brand mobile so here we have select honor brand checkbox after check of this brand checkbox then we can see only honor brand mobile on web page without refresh of webpage same way we want to filter mobile phone with 4gb RAM mobile so here we have select Ram filter with 4G gabite filter checkbox and after click on this filter we can see mobile phone with price less than 25 thousand brand honor and four gigabyte so this filter mobile phone we can see on webpage now we have refresh page and now we want to filter mobile phone with any price any brand and any REM but we want to display 64 gigabyte internal storage mobile phone so we have select this filter option after selecting of this option filter we can see mobile phone with internal storage 64 gigabyte so here our advanced PHP Ajax product filter has been working so if you want to filter mobile phone data with any combination then you can perform with this advanced product filter which has been make by using PHP with Ajax and this type of filter we can see on most of eka MERS website for filter product if you have any query or input regarding this video tutorial please comment your query or input in comment box or if you like this video tutorial please share with your friends or even you can also share on social media also if you want to get more update regarding our video tutorial please subscribe our YouTube channel forget more update regarding release of future video lastly keep watching our YouTube channel thanks for watching this video tutorial

Channel: Webslesson

Views: 100,640

Keywords: php, ajax, checkbox, filter, jquery, checkbox filter, price filter, ajax product filter, ajax product filter php, ajax checkbox filter tutorial, product filtering, filter products, ajax multiple checkbox filter, ajax php product filter, live filter, product filter using php, refine search php, filter products using php mysql and jquery, php ajax filter search results, checkbox filter php mysql, how to filter products in php

Id: H2ISgzBgcA0

Length: 35min 13sec (2113 seconds)

Published: Fri Aug 10 2018