Système de notation à étoiles simple et efficace avec jQuery et Ajax

A very precise jQuery Ajax star rating system tutorial

Télécharger le ZIP
Licence d’utilisation

Déjà 3977 téléchargements !

Live demo

Exemple de système de notation avec 3 étoiles

Note : 2.39/3 (128 votes) - par 1two

Exemple de système de notation avec 5 étoiles

Note : 3.5/5 (137 votes) - par 1two

Exemple de système de notation avec 7 étoiles

Note : 3.65/7 (119 votes) - par 1two

Description du projet

Construire un système de notation multi-étoiles avec jQuery, AJAX et PHP n’est pas une tâche facile, surtout si nous voulons qu’il reste simple, efficace et facile à installer.

Avec ce nouveau système de notation par étoiles PHP, vous pourrez évaluer n’importe quel média (films, histoires, produits, vidéos, articles pour site e-commerce…) simplement en incluant un bout de code sur votre page Web.

Il s’agit ici d’une solution 100% complète avec un cookie stocké (paramétrable) pour s’assurer que les gens ne votent qu’une seule fois (du moins pour un temps donné).

Un système de notation multi-étoiles !

Ce programme est un système de notation multi-étoiles. Cela signifie que vous pouvez facilement choisir le nombre d’étoiles dont vous avez besoin pour évaluer votre média.

Autant de système que nécessaire par page

En outre, vous pouvez ajouter autant de systèmes de notation par étoiles que nécessaire sur votre page Web. Imaginez que vous possédez un site e-commerce. Sur une page vous avez 20 articles et vous souhaitez permettre à vos visiteurs d’évaluer tous ces articles. Aucun problème ! Vous pouvez facilement installer 20 barres étoilées sous ou autour de vos articles.

Le code

Après avoir installé le script, ajoutez simplement ce bout de code pour appeler un système de notation par étoiles :

echo starRating(5, 1, 44);

C’est une fonction à trois arguments :

  • 1er argument : le nombre d’étoiles (5 dans notre exemple),
  • 2ème argument : l’id du média (l’identifiant – issu de votre base de données – de votre Média),
  • 3ème argument : la largeur de votre graphique étoile (en pixels – 44 dans notre exemple puisque les étoiles font 44 pixels de large).

Comment fonctionne le système ?

Le graphique des étoiles

J’ai choisi une étoile de 44x44 pixels. Je fournis donc un graphique de 44x88 pixels comprenant l’étoile transparente (état vide) sur fond blanc et l’étoile en surbrillance (état lors du survol de la souris) qui est une étoile bleue sur fond blanc.

Star Rating System Pic 1

Selon la disposition de votre site Web, vous pouvez choisir une étoile plus grande ou plus petite et un fond de couleur différente. Créez simplement votre propre graphique en utilisant Photoshop par exemple. Mais l’étoile d’état vide doit être transparente, vous comprendrez bientôt pourquoi.

Donc en gros la première étoile transparente est celle qui s’affiche par défaut, et la bleue s’affiche lorsque vous passez votre souris dessus pour noter.

La première couche

Sous les étoiles, vous trouverez une première couche. La couche div est la taille de votre étoile multipliée par le nombre d’étoiles que vous avez choisies.

Pour un système d’évaluation à 5 étoiles, elle sera de 44 pixels de haut et de 220 pixels de large (5 x 44px).

Star Rating System Pic 2
Exemple de div : couleurs jaune et grise affichées sous les étoiles.

Ainsi, lorsque vous actualisez votre page Web, pour un média (qui a pour ID 1), une barre d’étoiles est appelée par la fonction starRating(5, 1, 44);.

Avec une simple requête nous recherchons dans la base de données la moyenne et le nombre de votes pour ce média :

$query = 'SELECT rate, nbrrate FROM 1two_tuto_rating WHERE media='.$mediaId.'';

Avec la formule…

$numEnlightedPX = round($nbrPixelsInDiv * $average / $numStar, 0);
… nous calculons le nombre de pixels que nous devons colorier (en jaune #ffc600 par exemple) dans notre premier calque div. Le reste de la div sera colorié en gris (#cccccc par exemple).

Nous utilisons la fonction CSS linear-gradient pour colorier le nombre de pixels dont nous avons besoin dans notre div de 44 par 220px.

style="width:'.$nbrPixelsInDiv.'px; height:'.$starWidth.'px; background: linear-gradient(to right, #ffc600 0px,#ffc600 '.$numEnlightedPX.'px,#ccc '.$numEnlightedPX.'px,#ccc '.$nbrPixelsInDiv.'px);"

Vous voyez maintenant le processus : une première couche composée d’un nombre précis de pixels en jaune (selon la moyenne et le nombre de votes) et le reste en gris (vous pouvez choisir la couleur que vous voulez, fournissez simplement la couleur en hexadécimale). Dessus se trouvent nos graphismes d’étoiles (état vide), donc le bon nombre d’étoiles est colorié… avec précision !

Files architecture

Voici les fichiers que contient de script 1two Star Rating System.

index.php
_connexion.php
ajax/
star-rating-tuto.php
js/
star-rating-tuto.js
design/
star.png
loader-small.gif

Structure de la base de données

id est un champ auto-incrémenté. media (un integer) est votre id de média. rate (un integer) est la somme des votes faits par les internautes. nbrrate (un integer) est le nombre de votes.

Copier/coller ce code pour créer la base de données.

CREATE TABLE IF NOT EXISTS `1two_star_rating` (
`id` int(11) NOT NULL AUTO_INCREMENT,
`media` int(11) NOT NULL,
`rate` int(11) NOT NULL,
`nbrrate` int(11) NOT NULL,
PRIMARY KEY (`id`)
) ENGINE=InnoDB DEFAULT CHARSET=latin1;

Licence

Copyright © 2022 1two

Vous pouvez modifier à souhait le script afin qu’il corresponde exactement à vos besoins.

Le script est fourni « tel quel », sans garantie d’aucune sorte. En aucun cas, les auteurs ou les détenteurs du copyright ne seront responsables de toute réclamation, dommage ou autre responsabilité, que ce soit dans une action contractuelle, délictuelle ou autre, découlant de, ou en relation avec le script.

Si vous utilisez ce script sur votre site Internet, vous êtes tenu, par courtoisie, de garder le lien présent vers la page d’accueil du site 1two.org, agissant comme un avis de droit d’auteur. Vous êtes autorisé à placer le lien à un autre endroit de votre/vos page(s), dans du contenu, une colonne ou le pied de page par exemple.

Si vous souhaitez acheter le script afin de vous exempter de tout copyright et être autorisé à retirer le lien, vous pouvez faire le paiement de 10 euros via Paypal.
Comme motif de paiement, placez si vous le pouvez dans le champ commentaire : « Achat licence 1two Star Rating System ». Vous pouvez autrement nous confirmer l’achat via retour de courriel.

Si vous avez des doutes quant à l’utilisation de ce script, contactez-nous.
Si vous souhaitez que nous apportions des modifications pour vous, comme un autre format d’étoiles, d’autres couleurs…, contactez-nous.

Déclaration Cnil : 1086105
©1two, tous droits réservés 2022.