Sistema di valutazione a 5 stelle

**parider** · 27-12-2016, 07:06

Si, lo so, ma appunto sono online.
Non vedo solo le stelline bianche, ma si illuminano di giallo se ci passo col muose (si illumina quella su cui sono e le precedenti).
Ma la pagina non fa nulla di altro: se clicco non succede niente di niente né vedo i voti da nessuna parte

**blackpanth** · 27-12-2016, 15:56

Mi sono preso la briga di provare la demo nella cartella download...

Aprendo la pagina ho visto pari pari quello che hai detto di vedere tu...

Conclusione javascript funziona correttamente, php no...

Quindi torniamo al punto di partenza del mio primo post...

Quale programma hai installato come webserver?

**parider** · 28-12-2016, 07:36

Ho provato a caricare la cartella scaricata sul sito internet: ha lo stesso comportamento che in locale.
Non riesco appunto a capire quali punti devo modificare ad hoc afinché funzioni

**parider** · 28-12-2016, 07:26

EasyPhp, che so essere un programma molto vecchio e passato ma per molte cosa che devo fare alla fine basta.
A me però la demo online non funziona (cliccando mi dice "pagina non trovata").
Mentre, per quanto riguarda la cartella scaricata, per farla funzionare devo modificare qualcosa nel codice o solo trovare il webserver corretto?
Grazie

**blackpanth** · 28-12-2016, 14:58

Ho solo copiato ed incollato la demo nella cartella www di Easyphp, fatto partire il programma e avviato il browser...

Non ho effettuato nessun tipo d' intervento sui codici... funziona così com'è...

Tutta l' operazione sarà durata si e no un paio di minuti...

Ora faccio un riassunto di quanto detto nei post precedenti:

Primo caso: Se javascript funziona e php no. Vedrai a video le stelline bianche con "vote rate" su sfondo grigio; al passaggio del mouse le stelline diventano arancioni; non funziona.

Secondo caso: Se javascript non funziona e php si. Vedrai a video le stelline bianche con "vote rate" su sfondo grigio; al passaggio del mouse le stelline rimangono sempre bianche e non succede nulla; non funziona.

Terzo caso: Sia javascript e sia php funzionano correttamente. Vedrai sul browser 3 stelline rosse e 2 bianche per ogni ranking, 172 votes recorded (3.2 rating) per il primo e 90 votes recorded (2.7 rating) per il secondo su sfondo grigio; al passaggio del mouse le stelline diventano arancione, al clik di qualsiasi stellina s'incrementa il numero di votanti e cambia la percentuale del ranking, con diversi click cambia anche il numero di stelline rosse; funziona tutto correttamente (deve uscire la percentuale tra parentesi).

A questo punto, il motivo per cui non funziona dipende probabilmente da una bazzeccola che sta a te risolvere, io posso fare solo altre mille congetture...

**parider** · 28-12-2016, 15:18

Grazie per la pazienza.
Si, il mio caso é appunto il primo: javascript funziona ma non php.
Ora sono sono fuori casa, stasera riguardo ancora. Se non c'é necessità di modificare codice é davvero strano .
Oltretutto é presente l'uso di php ma senza neanche database (salva i risultati su file).
Anche io metto la cartella in quelle www di easyphp, faccio partire il programma e da là accedo alla pagina page.html .
Dovrò sbatterci un po' la testa, grazie

**parider** · 29-12-2016, 15:38

Ho trovato, quasi mi vergogno a dire quale fosse il problema.
Avevo scommentato l'ultima parte del file php , e per qualche motivo così non funzionava.
Mi pare che la parte commentata abbia funzioni alternative rispetto a quella non commentata.
Non riuscivo a capire perché non avevo valutato che scommentare quel blocco potesse creare problemi (pensavo che, al massimo, quelle due funzioni in più non sarebbero state richiamate...in effetti non ho capito bene perché così non va...).
Adesso funziona usando il file txt come "database". Quello che mi piacerebbe fare è fare una tabella di database dove ogni riga rappresenta i dati dei voti di un libro, anziché usare un file txt per ogni pagina html dove è presente una votazione

**parider** · 30-12-2016, 09:32

Ora ho, lato html:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd"
>
<html lang="en">
<head>
<title>AJAX 5 Star Rating</title>

<script src="http://code.jquery.com/jquery-latest.js"></script>
<script>

// This is the first thing we add ------------------------------------------
$(document).ready(function() {

$('.rate_widget').each(function(i) {
var widget = this;
var out_data = {
widget_id : $(widget).attr('id'),
fetch: 1,
file_name : './ratings.data.txt'
};
$.post(
'ratings.php',
out_data,
function(INFO) {
$(widget).data( 'fsr', INFO );
set_votes(widget);
},
'json'
);
});

$('.ratings_stars').hover(
// Handles the mouseover
function() {
$(this).prevAll().andSelf().addClass('ratings_over ');
$(this).nextAll().removeClass('ratings_vote');
},
// Handles the mouseout
function() {
$(this).prevAll().andSelf().removeClass('ratings_o ver');
// can't use 'this' because it wont contain the updated data
set_votes($(this).parent());
}
);

// This actually records the vote
$('.ratings_stars').bind('click', function() {
var star = this;
var widget = $(this).parent();

var clicked_data = {
clicked_on : $(star).attr('class'),
widget_id : $(star).parent().attr('id'),
file_name : './ratings.data.txt'
};
$.post(
'ratings.php',
clicked_data,
function(INFO) {
widget.data( 'fsr', INFO );
set_votes(widget);
},
'json'
);
});

});

function set_votes(widget) {

var avg = $(widget).data('fsr').whole_avg;
var votes = $(widget).data('fsr').number_votes;
var exact = $(widget).data('fsr').dec_avg;

window.console && console.log('and now in set_votes, it thinks the fsr is ' + $(widget).data('fsr').number_votes);

$(widget).find('.star_' + avg).prevAll().andSelf().addClass('ratings_vote');
$(widget).find('.star_' + avg).nextAll().removeClass('ratings_vote');
$(widget).find('.total_votes').text( votes + ' votes recorded (' + exact + ' rating)' );
}
// END FIRST THING

</script>

<style>
.rate_widget {
border: 1px solid #CCC;
overflow: visible;
padding: 10px;
position: relative;
width: 180px;
height: 32px;
}
.ratings_stars {
background: url('star_empty.png') no-repeat;
float: left;
height: 28px;
padding: 2px;
width: 32px;
}
.ratings_vote {
background: url('star_full.png') no-repeat;
}
.ratings_over {
background: url('star_highlight.png') no-repeat;
}
.total_votes {
background: #eaeaea;
top: 58px;
left: 0;
padding: 5px;
position: absolute;
}
.movie_choice {
font: 10px verdana, sans-serif;
margin: 0 auto 40px auto;
width: 180px;
}
h1 {
text-align: center;
width: 400px;
margin: 20px auto;
}
</style>
</head>
<body>
<h1> Rate the following movies! </h1>
<div class='movie_choice'>
Rate: Raiders of the Lost Ark
<div id="r1" class="rate_widget">
<div class="star_1 ratings_stars"></div>
<div class="star_2 ratings_stars"></div>
<div class="star_3 ratings_stars"></div>
<div class="star_4 ratings_stars"></div>
<div class="star_5 ratings_stars"></div>
<div class="total_votes">vote data</div>
</div>
</div>

<div class='movie_choice'>
Rate: The Hunt for Red October
<div id="r2" class="rate_widget">
<div class="star_1 ratings_stars"></div>
<div class="star_2 ratings_stars"></div>
<div class="star_3 ratings_stars"></div>
<div class="star_4 ratings_stars"></div>
<div class="star_5 ratings_stars"></div>
<div class="total_votes">vote data</div>
</div>
</div>
</body>
</html>

e lato php:

<?php

$rating = new ratings($_POST['widget_id'], $_POST['file_name']);

isset($_POST['fetch']) ? $rating->get_ratings() : $rating->vote();

class ratings {

var $data_file;
private $widget_id;
private $data = array();

function __construct($wid, $file_name) {

$this->widget_id = $wid;
$this->data_file = $file_name;

$all = file_get_contents($this->data_file);

if($all) {
$this->data = unserialize($all);
}
}
public function get_ratings() {
if($this->data[$this->widget_id]) {
echo json_encode($this->data[$this->widget_id]);
}
else {
$data['widget_id'] = $this->widget_id;
$data['number_votes'] = 0;
$data['total_points'] = 0;
$data['dec_avg'] = 0;
$data['whole_avg'] = 0;
echo json_encode($data);
}
}
public function vote() {

# Get the value of the vote
preg_match('/star_([1-5]{1})/', $_POST['clicked_on'], $match);
$vote = $match[1];

$ID = $this->widget_id;
# Update the record if it exists
if($this->data[$ID]) {
$this->data[$ID]['number_votes'] += 1;
$this->data[$ID]['total_points'] += $vote;
}
# Create a new one if it doesn't
else {
$this->data[$ID]['number_votes'] = 1;
$this->data[$ID]['total_points'] = $vote;
}

$this->data[$ID]['dec_avg'] = round( $this->data[$ID]['total_points'] / $this->data[$ID]['number_votes'], 1 );
$this->data[$ID]['whole_avg'] = round( $this->data[$ID]['dec_avg'] );

file_put_contents($this->data_file, serialize($this->data));
$this->get_ratings();
}

# ---
# end class
}

//function return_rating($raw_id) {
//
// $widget_data = fetch_rating($raw_id);
// echo json_encode($widget_data);
//}
//
//# Data is stored as:
//# widget_id:number_of_voters:total_points:dec_avg:wh ole_avg
//function fetch_rating($raw_id) {
//
// $all = file('./ratings.data.txt');
//
// foreach($all as $k => $record) {
// if(preg_match("/$raw_id:/", $record)) {
// $selected = $all[$k];
// break;
// }
// }
//
// if($selected) {
// $data = split(':', $selected);
// $data[] = round( $data[2] / $data[1], 1 );
// $data[] = round( $data[3] );
// }
// else {
// $data[0] = $raw_id;
// $data[1] = 0;
// $data[2] = 0;
// $data[3] = 0;
// $data[4] = 0;
// }
//
// return $data;
//}
//
//
//
//
//function register_vote() {
//
// preg_match('/star_([1-5]{1})/', $_POST['clicked_on'], $match);
// $vote = $match[1];
//
// $current_data = fetch_rating($_POST['widget']);
//
// $new_data[] = $current_data['stars'] + $vote;
// $new_data[] = $current_data['cast'] + 1;
//
//
// # --> This needs to be fixed, since a widget ID is ALWAYS passed in
// # it should be a class property
// file_put_contents($_POST['widget'] . '.txt', "{$new_data[0]}\n{$new_data[1]}");
//
// return_rating($_POST['widget']);
//}

//foreach($all as $k => $record) {
// if(preg_match("/$raw_id:/", $record)) {
// $selected = $all[$k];
// break;
// }
//}
//
//if($selected) {
// $this->data = split(':', $selected);
// $this->data[] = round( $this->data[2] / $this->data[1], 1 );
// $this->data[] = round( $this->data[3] );
//}
//else {
// $this->data[0] = $this->widget_id;
// $this->data[1] = 0;
// $this->data[2] = 0;
// $this->data[3] = 0;
// $this->data[4] = 0;
//}
?>

In sostanza provo a passare l'informazione sul percorso del file dal lato html, per poi inserire il valore nella classe php tramite il passaggio di due valori , e non più uno, nel costruttore.
Il problema è che non funziona, e non capisco dove si trova l'errore di sintassi o semantico.

**parider** · 30-12-2016, 09:31

Ho provato a fare questa modifica.
Prima avevo, lato html:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd"
>
<html lang="en">
<head>
<title>AJAX 5 Star Rating</title>

<script src="http://code.jquery.com/jquery-latest.js"></script>
<script>

// This is the first thing we add ------------------------------------------
$(document).ready(function() {

$('.rate_widget').each(function(i) {
var widget = this;
var out_data = {
widget_id : $(widget).attr('id'),
fetch: 1
};
$.post(
'ratings.php',
out_data,
function(INFO) {
$(widget).data( 'fsr', INFO );
set_votes(widget);
},
'json'
);
});

$('.ratings_stars').hover(
// Handles the mouseover
function() {
$(this).prevAll().andSelf().addClass('ratings_over ');
$(this).nextAll().removeClass('ratings_vote');
},
// Handles the mouseout
function() {
$(this).prevAll().andSelf().removeClass('ratings_o ver');
// can't use 'this' because it wont contain the updated data
set_votes($(this).parent());
}
);

// This actually records the vote
$('.ratings_stars').bind('click', function() {
var star = this;
var widget = $(this).parent();

var clicked_data = {
clicked_on : $(star).attr('class'),
widget_id : $(star).parent().attr('id')
};
$.post(
'ratings.php',
clicked_data,
function(INFO) {
widget.data( 'fsr', INFO );
set_votes(widget);
},
'json'
);
});

});

function set_votes(widget) {

var avg = $(widget).data('fsr').whole_avg;
var votes = $(widget).data('fsr').number_votes;
var exact = $(widget).data('fsr').dec_avg;

window.console && console.log('and now in set_votes, it thinks the fsr is ' + $(widget).data('fsr').number_votes);

$(widget).find('.star_' + avg).prevAll().andSelf().addClass('ratings_vote');
$(widget).find('.star_' + avg).nextAll().removeClass('ratings_vote');
$(widget).find('.total_votes').text( votes + ' votes recorded (' + exact + ' rating)' );
}
// END FIRST THING

</script>

<style>
.rate_widget {
border: 1px solid #CCC;
overflow: visible;
padding: 10px;
position: relative;
width: 180px;
height: 32px;
}
.ratings_stars {
background: url('star_empty.png') no-repeat;
float: left;
height: 28px;
padding: 2px;
width: 32px;
}
.ratings_vote {
background: url('star_full.png') no-repeat;
}
.ratings_over {
background: url('star_highlight.png') no-repeat;
}
.total_votes {
background: #eaeaea;
top: 58px;
left: 0;
padding: 5px;
position: absolute;
}
.movie_choice {
font: 10px verdana, sans-serif;
margin: 0 auto 40px auto;
width: 180px;
}
h1 {
text-align: center;
width: 400px;
margin: 20px auto;
}
</style>
</head>
<body>
<h1> Rate the following movies! </h1>
<div class='movie_choice'>
Rate: Raiders of the Lost Ark
<div id="r1" class="rate_widget">
<div class="star_1 ratings_stars"></div>
<div class="star_2 ratings_stars"></div>
<div class="star_3 ratings_stars"></div>
<div class="star_4 ratings_stars"></div>
<div class="star_5 ratings_stars"></div>
<div class="total_votes">vote data</div>
</div>
</div>

<div class='movie_choice'>
Rate: The Hunt for Red October
<div id="r2" class="rate_widget">
<div class="star_1 ratings_stars"></div>
<div class="star_2 ratings_stars"></div>
<div class="star_3 ratings_stars"></div>
<div class="star_4 ratings_stars"></div>
<div class="star_5 ratings_stars"></div>
<div class="total_votes">vote data</div>
</div>
</div>
</body>
</html>

e lato php:

<?php

$rating = new ratings($_POST['widget_id']);

isset($_POST['fetch']) ? $rating->get_ratings() : $rating->vote();

class ratings {

var $data_file = './ratings.data.txt';
private $widget_id;
private $data = array();

function __construct($wid) {

$this->widget_id = $wid;

$all = file_get_contents($this->data_file);

if($all) {
$this->data = unserialize($all);
}
}
public function get_ratings() {
if($this->data[$this->widget_id]) {
echo json_encode($this->data[$this->widget_id]);
}
else {
$data['widget_id'] = $this->widget_id;
$data['number_votes'] = 0;
$data['total_points'] = 0;
$data['dec_avg'] = 0;
$data['whole_avg'] = 0;
echo json_encode($data);
}
}
public function vote() {

# Get the value of the vote
preg_match('/star_([1-5]{1})/', $_POST['clicked_on'], $match);
$vote = $match[1];

$ID = $this->widget_id;
# Update the record if it exists
if($this->data[$ID]) {
$this->data[$ID]['number_votes'] += 1;
$this->data[$ID]['total_points'] += $vote;
}
# Create a new one if it doesn't
else {
$this->data[$ID]['number_votes'] = 1;
$this->data[$ID]['total_points'] = $vote;
}

$this->data[$ID]['dec_avg'] = round( $this->data[$ID]['total_points'] / $this->data[$ID]['number_votes'], 1 );
$this->data[$ID]['whole_avg'] = round( $this->data[$ID]['dec_avg'] );

file_put_contents($this->data_file, serialize($this->data));
$this->get_ratings();
}

# ---
# end class
}

//function return_rating($raw_id) {
//
// $widget_data = fetch_rating($raw_id);
// echo json_encode($widget_data);
//}
//
//# Data is stored as:
//# widget_id:number_of_voters:total_points:dec_avg:wh ole_avg
//function fetch_rating($raw_id) {
//
// $all = file('./ratings.data.txt');
//
// foreach($all as $k => $record) {
// if(preg_match("/$raw_id:/", $record)) {
// $selected = $all[$k];
// break;
// }
// }
//
// if($selected) {
// $data = split(':', $selected);
// $data[] = round( $data[2] / $data[1], 1 );
// $data[] = round( $data[3] );
// }
// else {
// $data[0] = $raw_id;
// $data[1] = 0;
// $data[2] = 0;
// $data[3] = 0;
// $data[4] = 0;
// }
//
// return $data;
//}
//
//
//
//
//function register_vote() {
//
// preg_match('/star_([1-5]{1})/', $_POST['clicked_on'], $match);
// $vote = $match[1];
//
// $current_data = fetch_rating($_POST['widget']);
//
// $new_data[] = $current_data['stars'] + $vote;
// $new_data[] = $current_data['cast'] + 1;
//
//
// # --> This needs to be fixed, since a widget ID is ALWAYS passed in
// # it should be a class property
// file_put_contents($_POST['widget'] . '.txt', "{$new_data[0]}\n{$new_data[1]}");
//
// return_rating($_POST['widget']);
//}

//foreach($all as $k => $record) {
// if(preg_match("/$raw_id:/", $record)) {
// $selected = $all[$k];
// break;
// }
//}
//
//if($selected) {
// $this->data = split(':', $selected);
// $this->data[] = round( $this->data[2] / $this->data[1], 1 );
// $this->data[] = round( $this->data[3] );
//}
//else {
// $this->data[0] = $this->widget_id;
// $this->data[1] = 0;
// $this->data[2] = 0;
// $this->data[3] = 0;
// $this->data[4] = 0;
//}
?>

Discussione: Sistema di valutazione a 5 stelle

Strumenti discussione

Ricerca discussione

Visualizza

Hybrid View

Permessi di invio