Build your eCommerce online shopping product filter using PHP MySqli ,jQuery Ajax | Smita Thapa | Skillshare

Playback Speed

  • 0.5x
  • 1x (Normal)
  • 1.25x
  • 1.5x
  • 2x

Build your eCommerce online shopping product filter using PHP MySqli ,jQuery Ajax

teacher avatar Smita Thapa, Engineer / Educator

Watch this class and thousands more

Get unlimited access to every class
Taught by industry leaders & working professionals
Topics include illustration, design, photography, and more

Watch this class and thousands more

Get unlimited access to every class
Taught by industry leaders & working professionals
Topics include illustration, design, photography, and more

Lessons in This Class

9 Lessons (42m)
    • 1. 1. Introduction to eCommerce Filter

    • 2. 2. Database Tables + Database Connection

    • 3. 3. Fetching Product From Database Using Ajax

    • 4. 4. Price Range Slider

    • 5. 5. Fetching Product Features

    • 6. 6. Category Filter

    • 7. 7. Other Features Filter

    • 8. 8. Sort By

    • 9. 9. The Last Information

  • --
  • Beginner level
  • Intermediate level
  • Advanced level
  • All levels
  • Beg/Int level
  • Int/Adv level

Community Generated

The level is determined by a majority opinion of students who have reviewed this class. The teacher's recommendation is shown until at least 5 student responses are collected.





About This Class

Build your eCommerce online shopping product filter using PHP MySqli, jQuery Ajax

This class is based on a live filter of products using Ajax which has been used in most of the eCommerce websites.
This course will mostly focus on the process of filtering of data using jQuery Ajax.
All the concepts are explained in detail and at the end, each viewer can easily make an eCommerce product filter.
The designed File is provided in the resource section.

This course will cover the followings:

1. Introduction to the Project
2. Database & Tables + Database Connection
3. Fetching Product From Database Using Ajax
4. Price Range Slider
5. Fetching Product Features
6. Category Filter
7. Other Features Filter
8. Sort By
9. The Last Information

Students should have basic knowledge of HTML, CSS and PHP, and jQuery before taking the course.

Meet Your Teacher

Teacher Profile Image

Smita Thapa

Engineer / Educator


I dedicated my last 10 years to learn and explore web development programmings. As a web programmer, I have contributed my knowledge to large organization and some of the biggest projects. I love learning and sharing my knowledge as I believe that more you share more you gain.

See full profile

Class Ratings

Expectations Met?
  • Exceeded!
  • Yes
  • Somewhat
  • Not really
Reviews Archive

In October 2018, we updated our review system to improve the way we collect feedback. Below are the reviews written before that update.

Why Join Skillshare?

Take award-winning Skillshare Original Classes

Each class has short lessons, hands-on projects

Your membership supports Skillshare teachers

Learn From Anywhere

Take classes on the go with the Skillshare app. Stream or download to watch on the plane, the subway, or wherever you learn best.


1. 1. Introduction to eCommerce Filter: Hello everyone and welcome to another interesting course in PSB. So well, this course is all about life filtering of product starts filter, VIP, price remains filter and take books and radio button filter feature by using add dex, jQuery, PHP and MySQL. So this is what we are going to do in this course. Okay, so we have this product section over here. You can see lots of products which are faced from our database again. So all the product with the categories and the name of the product. And you can see here ran stories size, all the features of this product is been sown here. Yes. And the main thing we will do is we will filter the product like in the e-commerce website. Yes. So when you go to the ecommerce website, then you have Benny filter of sun-like price, Okay, Category, Brand size. And then you can sort by with the latest and old are price low to high, price high to low. So same thing we will do here. We will learn how to filter the product like an ecommerce website with the help of objects, BSP. Okay, so now coming to our filter section, you have this price rate slider. You can see here, price is chains from two. Yes, so if you slide this, the price it changed. And also you can see without refreshing the bees, the product is being filtered according to the price. Yes. So this is what we are going to do in this course simply you can see the check box over here. And when you click the category lactose, you can see the laptops category and like smart phones. So you can see smart phones and their laptops, okay? So this is how you filter the product according to the category. And you use the check box over here. Similarly for brand also, you use the checkbox and then stories, check books, and for RAM, checkbox and size. Also, you will filter the product with the size again and then last the sought by paying that all the products here will be solved by as latest again. So and like price low to high. So you can see the price is going from low to high and similarly from high to low. Ok, so this is all the filter section we will do, we will cover, and then we have this reshaped button over here. When you click this, then all the filter things will be reset and all the product you can see here. So this is how the ecommerce website works. The simple Asics filter using jQuery, PHP and MySQL. So this is all we are going to learn in this course. So see you in the next video. Thank you. 2. 2. Database Tables + Database Connection: Hello everyone, welcome to the course. And this is the first video of this course. So I'm going to start from the database. So for this project, I have made the data-based adds excerpts, and I have a d will Gold product. And inside of this product table there are fields to landfills. And those are ID, product name, email, product category, product brand, product price, product ran, product stories, product size, product status again. So this is the table we need for this project. And I have already inserted lots of data in this table, okay? So you need this one, you have to make this table. Okay, so here is our index space, and you can see this in the only stays. So we need to shut down lots of thing over here in order to work out in our adjuncts winter. So first of all, let me tell you that we need to make a connection to our database most. So I have already made the connect dot BSP page inside of database folder. So you can see here, this is my connected PSP pays inside the database folder. And here I have function DB. And inside of these I have a static dollar gotten variable. And then there is an if condition that if this gun is goals, the goals to null, then there will be the connection to my database. Okay, so MySQL underscore Garnett function is used to connect to the database. And inside of this you need to put host. Then after that you Jermaine and Boston and database name, okay, so if the connection will not done, then there will be the message is good, not gone into database. I need to return the gone variable loci I have made the __init__ BSP pays. So here I have a standardization and I have called this scanning WSP. So in the index that PSP at the top, you just need to include this emitted VASP base oaky, so to say right here, include __init__ VSB. So now our session needs a stock, and after this you need to make the conn variable and you need to call the function database db function, sorry, DB function for connection to database. So d, dv function is being called here, okay? So you need this variable offer. So that's right, you did this. Okay, so down here you again see lots of HTML code. So we need to write the Bs we code in order to face the category, brand and everything. Ok, so we will do in the next video. Thank you for watching this video. 3. 3. Fetching Product From Database Using Ajax: Hello everyone, welcome to the course. And today in this video, we are going to start from fitting the product. So as you can see here in this space, we have already faced the product. We have phase the product true edge x. So here today we are going to do the same thing. Okay, so let's open the indexer BSB, and this is the row section where our product will be phage. So let's write here the glass so leased, so this graphs will be used in objects. Do so our product, okay, so save this spades right now. And then I have this filter data ab.js bees and I have gone this aim, our index page here, okay, so filter data JS Where we will write the adjuncts gold. Okay, so let's go ahead and make a function filter deta. Okay, so let's make the variable action and rewrite phase data, and then let's make the Aztecs. Now inside of the antics, you need to pass you RL, right? So instead be ASB, sorry, yes would become. And then after that method, the method will be Holst and then detail, we are going to bus action, okay? And then the last thing is success. So when the ejects colleagues subpages, then there will be a function and there will be data. The data will be same by the adjuncts success speeds oaky. So now if the exit scholarly succes, then we get the product. So here inside we need direct soulless. And so list is the glass of the div where we are going to sue our product. So dot HTML and inside of this you need to put data. Okay? So this is our J spades. So now here is such that B is B. We need to write queries, do Phase D product. Ok, so let's go ahead now. First of all, you need to put include Amy dot BSB, then right on equals to d v function. And after that IV, it saved dollar underscore post action, then just write a query. It goes to say let star from product where redox status calls to one. So this is our Cody to Phase D product. Okay, now dollar query result, because to my square lie and discard gory. And inside of this you have to pass the variable and then Corey, Keith, so rho equals to MySQL ally phage, airy. And inside of this you have to pass Cody region that I'm going to write here include, I'm going to include the bees goal for our list.pop speed. So this is the base where the product design are there for fetching the features and images. Okay, so this is finished right now. So here let's open our product list or BSP. So here you can see the design is already made just we need to put the data dollar VSB equal dollar row. So product underscore images. So here we have faced this protocol underscore enemies in the inner section. Similarly, category, so product category and then product name. And here it goes product rise. Similarly here it goes product brand. And then here inside we need to boot RAM. So this is for a storage section. So product under store storage. And the last thing is product underscore signs again. So we have phase the emails category, name-brand Bryce RAM, stories size k. Now we have finished everything. Now let's check. Ok. So here in jazz, we need to call the filter data function. So save this now. Okay, now let's go ahead and reload in our bees. So here you again see vd does came very nicely, but the email is deemed gum. So let's go ahead here. And k So I have made the mistake here. Column name is actually emails only, not the prologue underscore emails. Okay, so that's why e means dean gone now it is there. So these are the products that we are in our database and it is faced nicely. Okay, so let's revise that remainder. So list class and we made the filter data ab.js bays and recalled here in our index dot BSP. And in filter data dot js, we have made a function filter data and we have made a variable action. And then we made the adjuncts goal, and we have Boss URL. Here are cases that BSB and we showed the list of Baroque in our show list class. Yes, so insert that B is B. We going to do the database. We have done this condition over here. Then after this we have made a query to phase the product. And then we include deeper Eclipse dot BSB where our product, Amy's category name and features are faced. So these are the four base we walk today and we will have to work more in those pages. So see you in the next video. Thank you very much. 4. 4. Price Range Slider: Hello everyone, welcome to the course. And today in this video, we are going to meet the pricing slider. So you can see here the pressing slider. So when it varies, then it filters the product, the price in the from and do input box is just when you slide the slider. So let us begin. So this is the place where we have to put the filter section of price. So let's go ahead and write div. And the class will be filters. Ok, so close the div and inside of steve, We have the label, glass filters and the score label. So let's close the label tag. And inside of level we have this input type equals text, okay? And class filters underscore input. We will give the ID for this, that is for the minimum price, this, ok, now copy this and we will do the same for our maximum prices, MAX, okay? So these are two textbox for minimum prices and maximum prices here. And after this, we will make this slider div class. The score slider and discard bucks so close to d. Now inside of this, again, there is one more div, id equals to slider Bryce Glass printers. And the score slider does price. Now Di Jiang does MIN minimum, that is for a minimum and then data maximum, okay? This will be the range and data step will give five. So this is closing of our pricing slider. What we need to do is we have one j is, So this is the main.js. And here we have made the slider. So this pricing slider, cold, I will provide you in our project section. Okay? And also we need to call main.js here after filter data, the JS, okay, so you can see here in main.js, we have goal, this filter data function. This winter data function will filter the product. So we need to go here after this. Here you can see this is actually the sliding is annual US slider. So you need to put this in-order, do work with this pricing slider. Okay? So now what I'm going to do is I'm going to Fate's minimum and maximum price from our database. So here goes, dollar, max, min equals two by a square line. Cody dollar gone select mean inside of this unique direct coulomb named product price as. Mean price coma and similarly for maximum burden, underscore price as max price from product table where rho dot status equals to one. So this is our query to get the maximum and minimum price. So let's write now here max min equals to fetch as sum and then bus here, max min query. Okay, so we get this maximum and minimum data. So what do you need to do here? You need to provide here the minimum data, equal dollar, max mean data. So inside here you will write this is for a minimum, so you'll write mean price. Similarly, you have to do for Max Price. Okay? So I think the design there is a problem in our design and that is because we need to put double underscore here. Similarly, here, this is, these are the classes. Okay, so save it or Elodie, then you can see here from Eigen, see any two here. So 42, this is for two. Ok? So actually those are the classes and these from and do they are being faiths from this CSS oaky. So this thing you can see, this is the 7499, which is the minimum price of the product in our database. And similarly, 199999 is the maximum price of our product in our database. Now, when you slide the slider, you can see the changes in the price, but the murdoch has not changed, so we need to pass it in our filter data ab.js. Okay, so let's make the variable meaning MOM underscore price equals two id of minimum price, that is hash mean prices. So you will get the value from the mean prices inbox, that is this one. You can see here the idea of Maine price. Textboxes mean prices. So here you use this. So here you will get the minimum price. Similarly, we have to do further maximum price. So here the ID of maximum is max prices. So here we got these two values, minimum price and maximum price. Now we have to pass it here. Minimum price, that is minimum rise, ok? Similarly for maximum price, maximum price, okay? So, so this, now in soils that p is B, after this query, you need to write ef is saved dollar underscore post minimum, underscore, Bryce, and dollar underscore post maximum price and dollar underscore post minimum price, not equals to blank. And similarly for maximum price, meaning to do here. So Max rice, nautical stew blank. Then we will add query. So you need to put dot equals to two, add more thing in our greedy. So silicon star from product where a student is equals to one and product price between dollar underscore post minimum price and dollar underscore post maximum price. Okay? So we have this Gordy added for maximum and minimum price. Let's save this, reload the base. So you can see here when I chains it, then there is the filter in our product. Ok, so this is how this spread up price strings printer is done. And I hope you understand it. Thank you for being with us. See you in the next video. 5. 5. Fetching Product Features : Hello everyone, welcome to the course. And today in this video, we are going to face the category in the checkbox, brand stories, RAM, and size. Okay, so let's go ahead and do this. So here I have this category section. And after this you, I'm going to write the gory to Phase D category, get query equals to MySQL, underscore query donor gone select star from product. Product status equals to one. And we need to group by product category. Okay, this is important. Let's write while dollar cap rho equals to minus germline, which airy inside of this bus category. And then press ok. So after this, let's first close the while loop. And inside the while loop we have list. And inside of list we got the checkbox. So input class, it goes to filter data, does filter equals to one and type equals two check box. Then we need to give ID and I'm going to give cat and then be speed equal dollar kept rule. And I'm going to pass ID here. Okay? So this is ID now will get the value dollar b speed equal dollar gap grow. And here it will be readopt underscore category. So close this. Now you need to put label Glass, check box as labor and four equals two. Now, the id of input and the far off label, so be same, okay? So you can just copy this best it. And then here you need to write PSP equal dollar product underscore category and then close to level. So this is our category. Okay, let's save it and reload debased. So you can see our trick category has been fetched. Okay, so this is working nicely. So similarly we need to face branding stories, RAM, and size. So let's go ahead, let's go be this BSB up to BSB and then inside our brand. Okay, so let's skip it and less chance the coyly name, brand underscore Cody select product where product status equals to one group by product, brand oaky. So let's write the brand role here and copy this coyly at best here, got with this brand row. And in this section, just best it in place of cat row. And here in the ID you need the right brand, key chains the far of labeled brand. And then you need to put here for luck, underscore brand. And same thing goes here in the value, okay, protocol discouraged brand. So this is our brand. Save this C here, if it is done nicely, okay, brand is there. Now let's go for stories, RAM and size. So let's save. The press did just choose this thing. Stories. So here, don't be product underscore storage. Here we will write stories, sorrow, and then just copy this story's row best in a key and just change this baroque underscores storage similarly here. And then in the ID, you need to choose the stories. Think I k, So this is our stories done nice day. So let's go ahead and do the RAM and size and only we will check after that. Okay, so let's change their Graham go read. So to scope it is best here. Then we will change it for RAM rho k. So here we will chains in the groupBy per gram. So RAM row genes, this thing. Now let's put here ram in place of stories. Go up. It is in the far of label. And then here Institute of this unique direct burger Graham. And also in the value you need to chain. So this is also done. Ram is also done. Now let's go for the size soulless right here, size query and then burden group by product underscore size. Let's write here size row, and let's copy this Gordy variable and best deed. Similarly sized row should be there and unique derive Murdoch sized in place of product. And also you have to choose this id size and far off level. So I hope everything is done. Now let's go ahead and save this reload debased. So we got category, brand stories, RAM, size, everything done nicely. Now in the next video, we will filter the product when the category is clicked. Okay, so see you in the next video. Thank you for being with us. 6. 6. Category Filter: Hello everyone, welcome to the glass. And in the previous video, we have learned how to face the category brand stories, RAM, and size. Yes. And today in this video we are going to learn how to filter product when the checkbox is checked. Ok, so when this check category check books will be checked, then the product should be featured likewise. Okay, so let's go ahead and open your Notepad Plus, Plus. And in index the Vsb in the category input box, you need to add two class here. So first is filter undisclosed selector, and second is categories. So we have add this too, which is used in JS. Okay, so in the JS, you need to make the function first to get the values from the checkbox when they are checked. Okay, so function get underscore data is our function name. And inside of this we've been boss glass underscore name. And inside of this we need to make a variable feature which is an array. So now after this dollar and inside of this dot plus past the glass name variable plus colon and check a qi dot each. And then function that inside of this write filter that pose dollar this dot val and close the function and then return filter. So this is the function which is used to get the values of check box with the help of the class name. Ok, we are going to make a valid category. So we are going to get the categories from the checkbox. Okay, good data. And inside of this, pass the class name of the category which we have made just now. Yes. So now here in the data bus, the category to our search space, not in such that B is B. You need to write if it said dollar underscore post category. So you need to make a variable first product cat, the goals do you need to implode comma dollar underscore post category now, right, gallery dot equals two and product category in dollar product cat dot, okay, that's it. Now in filter data judge JS after this and just go ahead and write Dollar Dot feature selectors. So we'd have made the glass filter selector. Whenever this class will be taken, then we will call filter data function. So I hope we have finished this. Now let's go ahead and reload the base and click the laptop so you can see the categories laptops are so on. Similarly, smartphones and laptops, the product is filter according to the category. So this is the thing we have done today. So thank you for being with us and see you in the next video. 7. 7. Other Features Filter: Hello everyone, welcome to the course. And today in this video we are going to filter the product according to brand, stories, RAM, and size. Okay, so let's go ahead open the index dot BSB and scoping this filter selector bested in the brand checkbox and also at the brand className. Similarly for stories filter selector and stories Laos for RAM also for the just selector and grab a key and similarly goes to size. I'll go to filter data ab.js and just copy this where category. So you need for a brand stories size and drag. Okay, so just update, so brand and stories and then Ram and then size, okay? And now here boss brand, brand. Similarly for stories, stories, RAM, RAM size seven. Okay, now we pass this in our, for our services.js VSB. So in sorrows that BSB users need to copy these categories and just pasted and in place of category right, brands. So this is for brand. So you need to implored the, whatever comes in the brand values you need to implode. And that will be hold by this protocol ban. And query will be and product underscore brand, in product underscore brand. Okay? So similarly for the stories. So when the stories, it's, it's saved. So product stories implode stories and then query with B and product stories. In product stories, a key. So same thing you will do for RAM. So when the ram is, is saved, so productive underscore RAM implored the post Haram values. And then the query will be product underscore RAM in product underscore ran again. And last but not least, we have the Cij. So product underscore size, implored size here, then coyly will be verdict underscore size in productive discourse signs. Okay, so that's eight. Just saved this theme all the pages. Now, just go ahead and reload it. Now see the brand is working very nicely and inspire our SAS in Phoenix, oaky. So similarly, laptops, Elaine where? So? Similarly we will filter stories. Yes, it is done nicely. Same, likewise RAM, okay? And last size. Okay? So all the products are filtered correctly according to RAM size, stories and brand and category. Again. So we have a nice up to here today. So in the next video we will do the sort by thing. Okay. Thank you for being with us. See you in the next video. 8. 8. Sort By: Hello everyone, welcome to the course. And in the previous video we have filter according to category, brand stories, ramp, and size years. And today we will do this cert bisection. So let's go ahead and in Dexter BSB, inside of us of sort by, let's make the radio button first starting things. So list Input class equals to filter, filter, selector and sort type equals two radio name. It goes to filter value, it goes to the latest ID, it goes to the latest, then label class, Radio, desk, label for the latest and outside of this latest and then close the labor a key. So this is our, you can see here sort by the latest trivia word and appear. Now let's go ahead and let's go pick this thing list and bested Treebank. So this is her latest and then from oldest than price low to high and price high to low. So now you need to change something year old, so I'd even be old, old, and four will be bold. So similarly, Bryce h, similarly IB will be price LH and four 0s, price n h for low to high. And now the last one, price HL for high to low price and the score hl and for price underscore, HM, ok. So now we have for sorting option. Radio button is here, latest, Ollie's press low to high price, high to low. Now let's go ahead and in filter data ab.js, let's make a function, function gate, filter radio, and similarly like in checkbox function, we will pass the class name inside of this and we'll make the where are and the score filter. And now dollar dot plus class underscore name, colon checked each function R underscore future. Dollar, this doc back. Okay, now let's close the function first. And the skirt filter. Okay? So this is the get filter radial function, which will get the radio button values, okay, when it is checked. So now here we need to write, we need to make the batter sort and we will use the gate peter radial function to get the vacuous. Okay, so here inside of this we've asked the SART class_name. So you see here we have the radio button cost him start. So now in the add dex, you boston served, okay. Now save this and inserts dot b is b. Now you need to write 0V is saved dollar underscore post sort, and dollar underscore post fork, it goes to a, goes to latest, then the pointy dot equals to order by ID descending five. So let's go ahead, save the same all the pages and let j be the first one. That is the latest one. Okay, so we have this thing that skip click this, so you can see the latest is at the top, so it goes, this led us to old. Okay, so similarly, let's go ahead and insert the BSP. Let's copy this for the oldest, ok, so the value will be oldest, then the query will be ordered by ID, ascending. And similarly, for price low to high and edge, your order by product underscore price, S and name. And the last one for thrice high to low order by product underscore Bryce descending a gate. So this is the inserting gory. Now let's go ahead and list, see the region. So we have this one, we have checked the latest before. So you can see the latest one. Now when you pick the oldest than you can see the oldest game first? Yes. Now, Bryce Lowe, too high, then low price, and then goes to high. Similarly price high to low. So highest juvenile reason in the top. And then down here, the minimum price. Okay? So this is how we do the sort by things in our, this project. Okay, so see you in the next video. Thank you for being with us. 9. 9. The Last Information: Hello everyone, welcome to the glass. And here you can see when I click the category, take books, you can see the loading sown there. Yes. So we will do that thing today and also when there will be no data available than there will be the information, sorry, in origin. So we will do this today in our project. Okay, so let's go ahead and in index.js B, this is the place, this is the role where our product is faced. And this is the row where we need to solve our loading as well as, sorry, no result information. Okay, so let's go ahead and in filter data ab.js, in the first line of this filter data function, you need to write dollar and then inside of this dot, so list is the class of the div where we want to, so the information, so it's HTML. And inside of this div class equals to loading under score I could. And then I will write loading and then close the div key. So save this, go and see the result. So you can see the loading is there. Yes. So when you change, the loading appears before fetching the product. Fine. So now let's do with, sorry, no result information. So let's go ahead and let's go to search dot PSP. And here you need to first make count region for variable MySQL num rows. So it will count the number of rows that we get from this query. Okay? So the other reagent, okay? Now here, after this if count is less than one, that means there is no any regional. So we will equal blank saved this. And in filter data ab.js In the success function of our ads X goal, you need to write e. If so, data equals two equals two, blank, then you can copy this line and we will write no more region. That is the class name. And here, sorry, no regional fund and else, so list.html data, that will be product. Ok, so reload the base. Let's see here, sorry, no regional farms. So we get this information when there is no result found okay, in the database. So this is where our project of adjuncts, e-commerce or filter financed. And I hope you understand this very nicely and in the future, I'm in bringing more interesting projects in different languages. So thank you for being with us. See you in the next course.