How To Create Rating System Using PHP & MySQL & jQuery

In this video you will learn how to create rating system for your website. We are going to create the rating system where every person will be able to vote only once and then we are going to store all the details in our database and later when they revisit the website we are going to immediately detect that they have already rated and they won't be able to do it of course anymore so let's do it so now I'm here at my PHPStorm and first thing that we are going to do is you just create a basic page layout so I will just say okay I want to create HTML website and then let's say this year house a rating system and now we are not going to spend out of the time creating like the content from the page so we are just going to create the place where they are able to actually read so I will say we will have one there I will just align everything to the center and maybe let's just apply some basic okay so this is black and then let's see padding will be 50 pixels that's it okay so now let's grab font awesome okay so I'll go to font awesome I'll go to the home page would to start using free and I'm not going to change any of the options so just grab this edit our head okay and that's it and now what you are able to do is to just say okay I class first are and you should get one star icon on our website okay so probably it's black now so maybe we can change the color to the white okay let's see yeah you can see now it's we have one icon and for those of you that are not familiar with the font awesome basically it's a completely free library of course there is a paid version but free library where you are able to actually get a lot of the icons for your website so basically all you need to do is just check free here and then you can just search there's like thousands of difference icons that you can use for your website polling social media and whatnot okay so there are so so many of those and you will see them on pretty much any website I'm using to my personal own so it's good to know about those okay so let me now create five more so I will just say okay this will be star and then I want it to be two times bigger than the default one okay like this something very simple and then let's add four more okay fine so we'll have now five different stars that someone is able to do so now what we are going to create is I want first to create an effect so when someone goes with the mouse over I want to make sure that the color of the stars is changing and in that way we are able to actually feel like real okay I'm going to give two stars three stars whatever so in order to do that I went first to download the Drake query okay so I'll go to code to query calm I will use minified version I will just copy okay then I will just paste it here at the bottom so just a second I like to be in one line okay and then here we are going to write our custom script okay so first I want to wait for complete document load so I'll sit on document ready okay and now first thing that I want to do is I want that always by default we set all of those icons to the white so they are already like that but in case that you don't want to use an inline here you can just put the code here so whatever you like we can even leave the in line as the fault and then I want for each of these classes for each star I want okay to set hover effect so I will say mouse or you'll pull the function and then let's for now just bring to the console log so I'll say here whatever just so you can see it works and then maybe we can add mouse leap okay here too so let's see it work so open so okay or okay it works for each of those it is good okay so now the next thing that we want to do is first each time when the mouse is over I want to reset so C star and then or even what's what's even better is that we can delete this let me show why okay and then we can have one function that you will say okay reset start colors so that later in case that you want to quickly change the colors it's always in one function so we'll just say here first our CSS color and then we'll say Y okay so on the page load we are going to do it so save reset okay and then each time in each of those two okay and then if the most is for let's now find on which of those the mouse is over so maybe what we can do is to add some data index to each of those salsa date the index okay so this is one star two three four five okay and then we are going to see current yeah current index and you will say this dot are triggered theta index or even see it's always the same you can say like data index okay and then what we want to do so first we have reset it to the default now we know what is the current and now I want to start so we are going to say for war equal one less then no less and equal current index i plus plus and then all we need to do is we just one for the icon okay you want to change the color so let's say you want to have a green and that's it and now on the mostly we will just pass so let's see what will happen okay so over okay so it was backwards I'm not sure why is that on the first so this is quite weird let's see yep it's okay because the problem is that we we are starting the index from the one and this one is at zero position so maybe it's even better if we just change those can't on time that case this won't happen okay so let's see now 2 3 4 5 ok hope this makes sense ok so now we are able to create that effect you cannot of course put the yellow or whatever the color you want and let's not say that when someone click on any of those we want to remember that rating and we want to save it so much so let's do it so let's first define here like rated rated index let's say minus 1 which means that person didn't rate at all because we have from 0 to 4 and if we said it's minus 1 that means that he didn't would so then on the mouse leave here we will say F rated index different than minus 1 then in that case they will just do this same thing but with rated index okay and now we need to just enable click on those so that in case when someone click we are going just to remember that okay so say on colic function and then he will say that our rate that index is bars integer this not data index okay let's see now so I will refresh so let's say here rate that index is minus one so now if I go on this position go out nothing but if I go and click go out it stays so let's check out rate index it's two which means zero one two it's the third one okay and now of course if I go my with mouse over again it means that someone is able to change his ratio but the problem is he won't be able to like completely remove that word so it needs to be one of the options there is no option to trust not what at all if he is already there okay so now when someone colleague we have remembered this and what we can do now the best option for this is of course to have some log a registration system so on only registered people will be able to rate and in that case we are like hundred percent sure that they cannot vote multiple times but in the scenario like this where people are not logged in and we need to remember those we have a couple of options one is try to find the IP address and store it to the database and verify its time did they what or not then the next one is told to the cookies or the local storage and that's it each of those have its pros and cons each of those can be bypassed like there isn't like hundred percent protection so in our case whatever we use will be good enough for your understanding it all works so let's say we are going to use the local storage so I'll say does local storage dot set item and then I will just say he rated index and then I'll just put okay so let's see now so when i refresh and go to the application local storage okay so was this nothing special but we don't have here rate index but when I choose and click you can see now that my written index is 1 and if I treat my mind we have changed this okay so that means that even if some are refresh the page we know that they already read it and we will know what is the ratio so what I can do now is that when we are reset we can see here that if local stores dot get item rate index so let's see what it returns in case that there isn't so see dot get item whatever so it returns the null so say if is different than null in that case okay so maybe this part we can move to them yeah I'm just thinking maybe we should have a function let's say set stars and then we'll say here MAX because you can see that each time it's the same okay so this here will be called max so here I can say okay set stars rated index is max then in this case I can say set stars current index is max okay and then here I can say set stars and then I'll just say local storage get target item rate index oh okay so let's see now refresh boom you can see now that he knows that I read three stars so if read two stars and if i refresh it will stay you can see it's always at two stars and of course if someone for whatever reason manipulate it is and then refresh it will work that way but in the database it won't change okay so it will be saved in the database only when we make a click so we are going to implement that too and of course if we delete this and someone visit for the first time you can see it's not remember okay cool I hope this makes sense and now the last thing that I want to do is let's save it to the database so that we have like datebase in place where all ratings are stored and then we can calculate the average rate and stuff like that okay so first thing first let's create the database so PHP my admin' new let's say here writing system ok Unicode C okay then put these stars whatever okay then maybe just two columns okay so first one will be ID out auto increment and the next one we use let's see new stars maybe writing that's what they're to be let's say tiny integer okay and we'll save it that's it and now here when someone is clicked we are going to say so it's out receive here save to the database okay and now you are going to write this function okay function okay and then here will just say ajax okay and I'll see you IRL is our index dot PHP and then method you'll just see what else do we need we need data type know what am i doing datatype let's say will be JSON and the data will be the same and rated index index okay and maybe just let me first find success function response okay and maybe here we should have like user ID okay so this will be ID from our database in case that someone change their rate so by default I will say here user ID is equal zero okay which means that we need to add a new person and in case that person exists we are going to change this so we'll do it a little bit later for now we'll just say that it will be there okay and let's your response you can say that user ID = go like this okay let's see now now in the PHP B side we are going to accept so say if is post save so we will have like have like rated the index equal post rated index and then we are going to have also user ID and of course we need to have connection say to be local host will be root password sent to and our database is if I'm not wrong rating system and rating system starts ok and then here we need of course to do some real escape ok and then what you are going to do is we need to increase this rated and index by one because you are starting from the zero so if we have ten one star rated then in that case it won't count so that doesn't make sense okay and now let's let's check if user ID equals zero in that case we are just going to insert the person so we can say insert into top stars and we have just rated index values rated index okay and now we have different methods on how we are going to find the last ID but for the simplicity I will just say like okay SQL is connection query I'll say slack ID from stars order by ID - one means you are getting just the last one so say user data is as well fetch let's say associative array and then user ID is use of data I li okay and else if the person existed we are just going to say okay connection query of the Stars set rated index equal rate index where ID equal user ID okay and I think that I have made mistake here okay we are missing this other than that it looks good okay and then we are each time going to return an array with ID that this user ID who so many cool right anyway user ID rated index saved us to verify okay let's test this so fresh always go to the console looks good Network let's try to what boom okay we have made new request okay once a undefined function real escape string how is that possible okay let's see connection oh it's here my mistake okay let's try again okay boom I'm a zero super-interested you're not sure why doesn't warm-up let's try like this and now it's great now this is super super weird anyway we can see now that this is registered and there's rate index 3 which is good okay we have sent to ok it's training Davis that's okay now the last thing that we need to do is we need to remember this user ID so I'll just say ok local storage dot set item let's say user ID is ID and that's it and then we're so load for the first time then you are going to say okay local okay and now let's try so course not ideal be 2 - yeah of course this is not a problem let's see now now it shouldn't be anymore okay so let's now just create database and then we can test out it now okay lets now refresh cause there is I hope you remembered okay you're just going to delete those two fresh okay so now we will try to vote okay now it's in database it looks good now let's see what has happened the local storage it is at user IDs undefined why let's return it return it is for okay and let's see here your ID undefined again WHY so we are turning the Jason and it's because of this okay let's see yep my mistake let's try again okay let's see now what is the latest okay refresh that's right okay now user ID is five and rated and index is 2 okay yeah now it's okay so now when somehow refresh we will immediately next time know who that person is what is his vote and if he decided to change his mind okay he changed it and now when we go to the database we can see now that it's updated but in case that someone new comes in let's say like this and we vote now you can see that user ID has been changed and different index and we have in different number so now in order for us display this rating like average rating all we will need to do is like just to sum this entire rate index and displayed and the page divided by the number of those so that's very simple so last week so let's say I don't know with this here okay and then here I will say sorry I'll say okay connection query let's select Sun rate index as top down from stars okay and then let's say rated data is equil as well fetch array and then I'll say okay total is the data total and then now we also will need to get like how many rows we have in the database so let's see what I will just duplicate this one so I will just say select ID from stars and then I'll say num rated I will say a sql number of rows okay and then we can see average is what total true number of rated okay and then here we can say okay you will have two breaks and then let's all see here color is white and here I will just say a call average so if we did everything correctly it should work okay now you can see now this is our average of course now we can go and change it like use different functions if you want round number two to like closest value so we can say maybe here round two the two decimal points precision okay let's now see and that's it okay so of course now if someone changes okay and we refresh you can see it's changed and of course so each time it will be different okay so guys I hope that you have enjoyed this video we had small troubles here and there but that's coding that's how it works and that's why I'm not cutting the videos because I want to show what is possible and what happens and how you fix the problems so if you have enjoyed and if you like this video please like it and share with your friends and of course if you have any questions or anything please let me know in the comments below take care

Channel: Coding Passive Income

Views: 47,275

Keywords: php, mysql, jQuery, php rating system, rating system, rating system in php, ajax, rating, star rating, tutorial, web development, php tutorial, php tutorial for beginners, php for beginners, how to create rating system in php and mysql, how to create rating system, web design, php and mysql, php star rating system, voting, 5 star rating, php7, jquery tutorial

Id: i04U0C-v_to

Length: 31min 25sec (1885 seconds)

Published: Mon Apr 15 2019