<html>
<head>
<title>rating</title>
<link rel="stylesheet" type="text/css" href="css/rating_style"/>
<!<html>
<head>
<title>rating</title>
<link rel="stylesheet" type="text/css" href="css/rating_style"/>
<!--<script type="text/javascript" src="js/jquery-2.2.4.min.js"></script>-->
<script type="text/javascript" src="js/jquery-1.12.4.min.js"></script>
<script type="text/javascript">//crearemos una funcion script con la cual se pretende puntuar
$(document).ready(function(){
var clicked_val =0;
$('#1_star').hover(function(){
$('#1_star').attr('src',"img/star_full.png");//se trae a la estrella completa si el cursor pasa sobre esta
$('#2_star').attr('src','img/star_empty.png');//se trae la estrella vacia para las demas
$('#3_star').attr('src','img/star_empty.png');
$('#4_star').attr('src','img/star_empty.png');
$('#5_star').attr('src','img/star_empty.png');
});
$('#1_star').click(function(){
clicked_val =1;//se trae a la estrella completa si es clickeada y se conserva esta
});
$('#2_star').hover(function(){
$('#1_star').attr('src',"img/star_full.png");
$('#2_star').attr('src','img/star_full.png');
$('#3_star').attr('src','img/star_empty.png');
$('#4_star').attr('src','img/star_empty.png');
$('#5_star').attr('src','img/star_empty.png');
});
$('#2_star').click(function(){
clicked_val =2;
});
$('#3_star').hover(function(){
$('#1_star').attr('src',"img/star_full.png");
$('#2_star').attr('src','img/star_full.png');
$('#3_star').attr('src','img/star_full.png');
$('#4_star').attr('src','img/star_empty.png');
$('#5_star').attr('src','img/star_empty.png');
});
$('#3_star').click(function(){
clicked_val =3;
});
$('#4_star').hover(function(){
$('#1_star').attr('src',"img/star_full.png");
$('#2_star').attr('src','img/star_full.png');
$('#3_star').attr('src','img/star_full.png');
$('#4_star').attr('src','img/star_full.png');
$('#5_star').attr('src','img/star_empty.png');
});
$('#4_star').click(function(){
clicked_val =4;
});
$('#5_star').hover(function(){
$('#1_star').attr('src',"img/star_full.png");
$('#2_star').attr('src','img/star_full.png');
$('#3_star').attr('src','img/star_full.png');
$('#4_star').attr('src','img/star_full.png');
$('#5_star').attr('src','img/star_full.png');
});
$('#5_star').click(function(){
clicked_val = 5;
});
$('.rating_stars').mouseout(function(){ //si el raton no pasa sobre ninguna estrella entonces realizaremos lo que se muestra
if(clicked_val === 0 || clicked_val>5)
{
$('#1_star').attr('src',"img/star_empty.png");//si el raton no pasa, no se realiza ninguna accion y se muestra la imagen de la estrella vacia
$('#2_star').attr('src','img/star_empty.png');
$('#3_star').attr('src','img/star_empty.png');
$('#4_star').attr('src','img/star_empty.png');
$('#5_star').attr('src','img/star_empty.png');
}
else if(clicked_val === 1)
{
$('#1_star').attr('src',"img/star_full.png");//si el raton pasa sobre la primera estrella vacia entonces se cargará la estrella rellena
$('#2_star').attr('src','img/star_empty.png');
$('#3_star').attr('src','img/star_empty.png');
$('#4_star').attr('src','img/star_empty.png');
$('#5_star').attr('src','img/star_empty.png');
}
else if(clicked_val === 2)
{
$('#1_star').attr('src',"img/star_full.png");
$('#2_star').attr('src','img/star_full.png');
$('#3_star').attr('src','img/star_empty.png');
$('#4_star').attr('src','img/star_empty.png');
$('#5_star').attr('src','img/star_empty.png');
}
else if(clicked_val === 3)
{
$('#1_star').attr('src',"img/star_full.png");
$('#2_star').attr('src','img/star_full.png');
$('#3_star').attr('src','img/star_full.png');
$('#4_star').attr('src','img/star_empty.png');
$('#5_star').attr('src','img/star_empty.png');
}
else if(clicked_val === 4)
{
$('#1_star').attr('src',"img/star_full.png");
$('#2_star').attr('src','img/star_full.png');
$('#3_star').attr('src','img/star_full.png');
$('#4_star').attr('src','img/star_full.png');
$('#5_star').attr('src','img/star_empty.png');
}
else if(clicked_val === 5)
{
$('#1_star').attr('src',"img/star_full.png");
$('#2_star').attr('src','img/star_full.png');
$('#3_star').attr('src','img/star_full.png');
$('#4_star').attr('src','img/star_full.png');
$('#5_star').attr('src','img/star_full.png');
}
});
$('#Submit_Rating').click(function(){
if(clicked_val === 0 || clicked_val>5)
{
alert('Por favor califica');
}
else
{
alert('Tu opinion vale mucho.');
document.rating.rate.value = clicked_val;
}
});
});
</script>
</head>
<body>
<div class="rating_container">
<form name="rating" id="rating" action="#" method="post">
<div class="rating_stars">
<img src="img/star_empty.png" id='1_star'/>
<img src="img/star_empty.png" id='2_star'/>
<img src="img/star_empty.png" id='3_star'/>
<img src="img/star_empty.png" id='4_star'/>
<img src="img/star_empty.png" id='5_star'/>
<input type="hidden" value="" name="rate">
</div>
<div>
<input type='submit' value='Submint Rating' id='Submit_Rating'>
</div>
</form>
<br />
<div id='response'></div>
</div>
<?php
$servername = "localhost";
$username = "root";
$password = "";
$dbname = "rating";
$conn = mysql_connect($servername, $username, $password, $dbname) or die(mysql_error());
$ipaddress = md5($_SERVER['REMOTE_ADDR']);
if(isset($_POST)){
if(!empty($_POST['rate'])) {
$rate=$_POST['rate'];
mysql_query("INSERT INTO tbl_rating(id,rate,user_id) VALUES('$id','$rate','$user_id')");
if (isset($_POST['rate']) && !empty($_POST['rate'])) {
$rate = $conn->real_escape_string($_POST['rate']);
$sql = "SELECT `id` FROM `tbl_rating` WHERE `user_id`='" . $ipaddress . "'";
$result = $conn->query($sql);
$row = $result->fetch_assoc();
if ($result->num_rows > 0) {
echo $row['id'];
} else {
$sql = "INSERT INTO `tbl_rating` ( `rate`, `user_id`) VALUES ('" . $rate . "', '" . $ipaddress . "'); ";
if (mysqli_query($conn, $sql)) {
echo "0";
}
}
}
}
}
?>
</body>
</html>