How To Create Rating System Using PHP & MySQL & jQuery

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

52 thoughts on “How To Create Rating System Using PHP & MySQL & jQuery”

  1. Hey Senad , im a senior programmer but still always when i watch you i find new things and new ideas to use in my current and future projects.
    All i can say is love from Kosovo brother.

  2. Hi Senaid the video this rating tutorial was great, please can you make a tutorial eCommerce review with 5 star rating? i have been searching for such a system it would be great if you can create one for us.
    thanks.

  3. Another top quality video, thank you for it. The beel is on, i am on the video, greetings from Romania.

  4. you deserve more subs great work please start tutorials in future in category of cpanel,wordpress, api integration on php like ebay , data scrap using php advanced etc thanks

  5. This tutorial very helpful thanks, need to upload tut about creating change password page or make a cms for website

  6. Great tutorial, I was looking for this kind of tutorial. You are live saver sir. Keep up with the great tutorial.

  7. Hhehheheh omaklo ti se 15:19 (tacka) get ajtem 😀
    Inace svaka cast brt, samo tako nastavi, kul radis i lepo objasnjavas 😀

  8. Can u make tutorial about multiple users with one login system with php… Where standard users can register through the system… Thanks

  9. hi sir,

    am having a very serious problem.

    the problem is not about your video

    but the problem is that,

    after i finished uploading my website i had many errors on the console and the the network

    the network say's that "Provisional headers are shown" with a warning sign.

    and the console says that "POST http://mysite.php net::ERR_EMPTY_RESPONSE".

    pls i need help from u

  10. Great and useful tutorial as usual! Bravo Senaid. Could you please make tutorial how to export multiple xml files from an existing database. If we have names, passports, phones of many persons – not to generate only one xml file, but many xml files for every person in the MySQL database and the xml files to receive auto number – like PERSON001, PERSON002, PERSON003 and so on. Just as an idea for future lessons from you:)! Respect and keep your excellent work!

  11. Do You Have a tutorial on How to Create Membership Website System Using PHP and MySQL Tutorial with verification of email
    thanks a lot

  12. Hi, really appreciate for making this video but I'm just wondering why my id becomes null and the webpage warning of Division by zero appears so there's a nan appearing on the place that supposed to appear the rating score.

  13. I would love you to create one video about : how we know our visitor operating system that using our website or application using PHP and JS

  14. hey could you make a tutorial about XML files ? how they works ? how to use them for auto update products on eshop and etc… thanks.

  15. can you send me the source code because PHP RATING SYSTEM file not found in your download list. path: https://www.cpicoach.com/study

  16. It only show "here" when i click the star and show the "here2" when i click anywhere that not a star..it does not show in console log when i only hover the mouse and or just remove the pointer in the star..please help me thanks

Leave a Reply

Your email address will not be published. Required fields are marked *