You definitely need to use both javascript and PHP to accomplish this.
I would approach it like this:
a) Use jQuery javascript library to make the javascript easier.
b) Write some javascript which responds to the user selecting a rating. You'd probably need to bind to the onClick event of your rating buttons.
c) When a rating button is clicked, the javascript functions should use jQuery.ajax to send the selected rating to the server via an HTTP POST. The data sent to the server would probably need to contain an ID to identify the movie, an ID to represent the user (so you can stop people voting more than once for the same movie), and the rating they chose.
d) On the server-side, you can write a PHP script to handle the vote submissions. It would check for the movie, and user ids, (stored in PHP's $_POST variable), and then save the rating to some database. It could then also send a response back to the client which would contain the next movie id, and the next poster. I would recommend you use json_encode to store this info in a way that's easy for the javascript to interpret.
e) Finally, back on the client side, your javascript code can react to the data sent back by PHP, by putting up a message like 'thank you for your vote', then changing the movie details on screen to replace them with the new one.
Your client-side code would look something a bit like this:
<img id="movie-poster" src="movie poster src" />
<ul>
<li class="rating-button">1</li>
<li class="rating-button">2</li>
<li class="rating-button">3</li>
<li class="rating-button">4</li>
<li class="rating-button">5</li>
</ul>
<script>
var currentUserId;
var currentMovieId;
$('.rating-button').on('click',function() {
$.ajax({
url: "URL of PHP script here",
type: 'post',
data: {'movieId':currentMovieId, 'userId':currentUserId, 'rating':$(this).text()},
dataType: 'json',
success: function(response) {
// this runs after your PHP script has responded
// update your page with the new movie here
alert('thanks for voting');
currentMovieId = response.newMovieId;
$('#movie-poster').attr('src',response.newMoviePosterSrc);
}
});
}
</script>
Your PHP script would look something a bit like this (you'll have to figure out all the database and user authentication bits yourself)
<?php
$user_id = $_POST['userId'];
$movie_id = $_POST['movieId'];
$rating = $_POST['rating'];
// check that the user is allowed to vote - possibly examine cookie for this
// check that rating is between 0 and 5
// check that the movie exists
// store results of vote in database
// load up another random movie from the database and send it back (in JSON format)
// assume details of new movie are in $new_movie =
header('Content-type: application/json');
echo json_encode(array('newMovieId'=> new movie id here, 'newMoviePosterSrc' => URL of new poster here));
exit;
You should also add some error handling to that code. EG, messages to display if there's a connection problem, or the movie ID isn't recognised or something.
This page has more info on how to select a random row from your database - IE to select at random the next poster to show:
How to randomly select rows in SQL?
Hopefully that should be enough to get you started.
