Fonctionnement de base
Pour faire fonctionner ce super plugin il n'y a rien de plus simple
Cela se passe en 4 étapes :
- Inclusion de Jquery
- Inclusion du Plugin Jquery
- Inclusion du DIV contenant les étoiles
- Et pour finir le script d'appel lors du clic sur une étoile
Lorsque l'on clique sur une étoile le plugin appelle un fichier externe en ajax (ratingsdemo dans le zip), c'est dans ce fichier que vous pourrez ensuite créer votre script d'inclusion des résultats dans une base de données.
CODE
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>TUTOMANIA | RATING JQUERY</title>
<link rel="stylesheet" href="rater.css" type="text/css" media="screen" title="Normal" />
</head><body>
<script type="text/javascript" src="jquery-1.4.1.min.js"></script>
<script type="text/javascript" src="jquery.rater.js"></script>
Rating
<div id="demo" class="demo"></div>
<script type='text/javascript'>
$('#demo').rater('ratingsdemo.php');
</script>
</body></html>
Informations utiles
La variable qui est envoyée lors du clic sur une étoile est : rating, elle est envoyée par la méthode POST.
De ce fait dans votre fichier ratingsdemo.php vous pouvez récupérer cette variable et l'insérer dans un base de données par exemple. Commençons par afficher le résultat en AJAX.
Dans votre fichier ratingsdemo.php entrer le code suivant :
CODE PHP
<?php
$rate = $_POST['rating'];
echo "Votre choix : $rate";
?>
Le résultat est visible dans notre démo ci-dessus. Vous pouvez maintenant aisément créer un script pour entrera les données dans une base de données. Par exemple imaginons un système de news, généralement chacune de vos news à un ID unique dans votre base de données, voici comment adapter ce plugin :
Imaginons une base de données avec les champs :
ID - ID_NEWS - RATE
CODE
<script type='text/javascript'>
$('#demo').rater("ratingsdemo.php?id_news=$id");
</script>
Ensuite dans votre page ratingsdemo.php
CODE PHP
<?php
// Connexion à votre base de données
include("connect.php");
// Variable GET récupérée dans $('#demo1').rater("ratingsdemo.php?id_news=$id");
$id_news = $_GET['id_news'];
// Variable correspond au choix de l'utilisateur lors du clique sur une étoile
$rate = $_POST['rating'];
echo "Votre choix : $rate";
// Insertion de l'id et du vote dans la base de données
$add = mysql_query("INSERT INTO rate ( `id` ,`id_news` ,`rate`)
VALUES ('','$id','$rate')") or die ("problem SQL rate");
?>
Vous pourrez ensuite faire la moyenne des votes facilement
CODE PHP
<?php
// Nombre de vote
$sql = mysql_query("SELECT * FROM rate WHERE `id_news` = '$id');
$nb_vote = mysql_num_rows($sql);
// Somme des votes
$sql = mysql_query("SELECT sum(rate) as somme from rate where `id_news` = '$id'");
$data = mysql_fetch_array($sql);
$total = $data["somme"];
// Il reste à faire la moyenne de tout ça : $total / $nb_vote = la moyenne :)
// Ceci dit il est aussi possible de le faire plus rapidement avec AVG
$sql = mysql_query("SELECT AVG(rate) as moyenne from rate where `id_news` = '$id'");
$data = mysql_fetch_array($sql);
$moyenne = round($data["moyenne"],0);
En connaissant la moyenne vous pouvez maintenant afficher les informations au dessus ou en dessous de vos étoiles (nb de vote et moyenne).
Vous pouvez également afficher la moyenne actuelle directement avec vos étoiles à l'aide des options suivantes :
CODE
<script type='text/javascript'>
$('#demo').rater("modules/rate/ratingsdemo.php?nid=$id&mod=news", {curvalue:".$moyenne."});
</script>
Pour limiter les votes (un par adresse IP par exemple):
CODE PHP
<?php
include("connect.php");
$id_news = $_GET['id_news'];
$rate = $_POST['rating'];
$ip = $_SERVER['REMOTE_ADDR'];
if(is_numeric($id_news) AND is_numeric($rate)){
// On vérifie si l'id de la news et l'adresse ip du client existe déja
// Ou plutot on compte le nombre d'enregistrement
$sql5 = mysql_query("select id from rate where `id_news` = '$id_news' and `ip` = '$ip'");
$nomb = mysql_num_rows($sql5);
//Si le nombre est à 0, autrement dit si l'utilisateur n'a pas encore voté
if($nomb == '0'){
// on ajoute le vote
$add = mysql_query("INSERT INTO rate ( `id` ,`id_news` ,`rate`)
VALUES ('','$id','$rate')") or die ("problem SQL rate");
// Message avec le vote de l'utilisateur
echo'Merci, votre note : '.$rate.'';
// Si l'ip et l'id de la news à été trouvée on informe l'utilisateur qu'il a déjà voté
}else{
echo'Vous avez déja voté';
}
// Si $id_news ou $rate n'est pas numérique on affiche un message d'erreur
}else{
echo 'Erreur détectée';
}
?>
Plus d'informations sur la page de démonstration officielle :
http://www.m3nt0r.de/devel/raterDemo/
J'ai trouvé ce plugin très utile, j'ai voulu vous le proposer et également vous proposez mes modifications pour l'adapter à tout type de site.
Si vous souhaitez de l'aide ou obtenir de plus amples explications je vous invite à cliquez sur "Réagir sur ce tutorial - [Jquery] Star rating" tout en bas de cette page. Merci.
Sondage du mois
La connaissance ne vaut que si elle est partagée par tous
Utilisateurs en ligne
Administrateur - Newsers - Rédacteurs - VIP - Membres - Bots
Anniversaire du jour
Amis en ligne (0)
La bifle - Extrait
