javascript - PHP retrieve new images from database -

apologies noob question i’m still learning.

firstly i’m not asking program following problem me or give me code. i’m merely looking bit of logic , bit of advice.

what trying do

this example, trying different use same logic: trying display movie poster on website, user can rate movie between 0 - 5 stars, his/her rating recorded in database, along other users’ ratings. when he/she has finished his/her rating, new movie poster needs displayed he/she can again rate poster , goes on until he/she tired of rating movies.

the logic

• i assuming need use php here store , retrieve data
• a table created contains different images , ratings corresponding movie’s rating, along number of users rated movie calculate average total rating

the problem

• how image change once user rated image?

• is possible change image src onclick php javascript?

• if how do it? possible need use combination of php , javascript here?

any or advice appreciated. thank in advance.

you need use both javascript , php accomplish this.

i approach this:

a) use jquery javascript library make javascript easier.

b) write javascript responds user selecting rating. you'd need bind onclick event of rating buttons.

c) when rating button clicked, javascript functions should use jquery.ajax send selected rating server via http post. data sent server need contain id identify movie, id represent user (so can stop people voting more once same movie), , rating chose.

d) on server-side, can write php script handle vote submissions. check movie, , user ids, (stored in php's $_post variable), , save rating database. send response client contain next movie id, , next poster. recommend use json_encode store info in way that's easy javascript interpret.

e) finally, on client side, javascript code can react data sent php, putting message 'thank vote', changing movie details on screen replace them new one.

your client-side code bit 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) {       // runs after php script has responded       // update page new movie here       alert('thanks voting');       currentmovieid = response.newmovieid;       $('#movie-poster').attr('src',response.newmoviepostersrc);     }   }); } </script> 

your php script bit (you'll have figure out database , user authentication bits yourself)

<?php  $user_id = $_post['userid']; $movie_id = $_post['movieid']; $rating = $_post['rating'];  // check user allowed vote - possibly examine cookie // check rating between 0 , 5 // check movie exists // store results of vote in database  // load random movie database , send (in json format) // assume details of new movie 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 add error handling code. eg, messages display if there's connection problem, or movie id isn't recognised or something.

this page has more info on how select random row database - ie select @ random next poster show: how randomly select rows in sql?

hopefully should enough started.