Accueil > ajax > system-vote-ajax-rating

{ Système de vote avec étoiles }

Introduction

{

Update du 17.5.2013 : Le script a été mis à jour est utilise désormais la méthode PDO pour la connexion à MySQL (plus secure)

La nouvelle archive du script contenant toutes les dernières modifications est disponible en téléchargement

}

Super script de vote basé sur AJAX qui peut être placé plusieurs fois sur la même page sans que ça pose le moindre problème, si j'peux vous donner un conseil, c'est de suivre le tuto et pas de juste télécharger l'archive et la mettre en place à l'aveugle ; 95% de ceux qui suivent le tutos réussissent à faire tourner ce script du premier coup, ce taux de réussite chute à 30% pour ceux qui ne le suive pas...

Il faut savoir que la configuration n'est pas super aisée, en effet il est nécessaire de connaître un minimum PHP/MySQL pour pouvoir le configurer correctement.

Ce système de vote comporte l'avantage de mémoriser les adresses IP des votants ! Ainsi pas de tricherie possible !

Avantages :

Votes fiables

Affichage du nombre de vote total

Affichage de la moyenne

Pas de rechargement de la page


ajax_rating

Placement des fichiers

Placez les fichiers suivants dans votre arborescence selon le modèle ou selon le votre

Les fichiers PHP :

// Contient les données de connexion à la BDD
connect.inc.php

// Générateur d'étoiles
_drawrating.php

// Gère les navigateurs qui n'ont PAS Javascript
db.php

// Valide le vote dans la base de données
rpc.php

Les fichiers CSS :

Si vous le souhaitez vous pouvez la fusionner avec votre feuille de style déjà existante

rating.css

Les fichiers JavaScript :

// Sélecteur JS
behaviour.js

// Gestion des requêtes AJAX
rating.js

Vous devriez donc avoir l'arborescence suivante

      • connect.inc.php
      • rating.css
      • _drawrating.php
      • db.php
      • rpc.php
      • ajax-loader.gif
      • starrating.gif
      • behavior.js
      • rating.js

Intégration dans l'en-tête de la page

A placer entre les balises <head> et </head> de la page ou vous souhaitez intégrer le système de vote

<?php require('_drawrating.php'); ?>
<script type="text/javascript" language="javascript" src="js/behavior.js"></script>
<script type="text/javascript" language="javascript" src="js/rating.js"></script>
<link rel="stylesheet" type="text/css" href="css/rating.css" />

Attention à bien adapter les chemins d'accès vers vos fichiers !

Intégration dans le corps de la page

Placer dans le corps de la page entre les balises <body> et </body>

La fonction rating_bar('page-id', 'nbr-etoiles', 'static') prend 3 paramètres en compte :

  • page-id : Identifiant unique (il peut y en avoir plusieurs sur une même page)
  • nbr-etoiles : Permet de choisir le nombre d'étoiles affichées
  • static : Si ce paramètre est spécifié alors le vote sera désactivé, mais juste affiché
<?php echo rating_bar('id_unique_page','5'); ?>

Création de la table mysql

Accéder à l'administration de votre site et via PhpMyAdmin créer une nouvelle table en collant le code suivant dans la fenêtre SQL de PhpMyAdmin.

{

Correctif apporté : dans le script original le type de champ pour le 'id' est varchar(11) je l'ai donc volontairement modifié pour un varchar(255) histoire d'assurer une plus grande compatibilité ! Le varchar(11) ne supportant pas les 'id' trop longues.

} 
--
-- Structure de la table `ratings`
--

DROP TABLE IF EXISTS `ratings`;
CREATE TABLE IF NOT EXISTS `ratings` (
  `vote_id` int(11) NOT NULL auto_increment,
  `page_id` varchar(255) collate latin1_german1_ci NOT NULL,
  `total_votes` int(11) NOT NULL default '0',
  `total_value` int(11) NOT NULL default '0',
  `used_ips` longtext collate latin1_german1_ci,
  PRIMARY KEY  (`vote_id`)
) ENGINE=MyISAM  DEFAULT CHARSET=latin1 COLLATE=latin1_german1_ci AUTO_INCREMENT=476 ;

Données de connexion

Spécifiez les données de connexion dans le fichier connect.inc.php

<?php
/*************************/
/***** Connexion PDO *****/
/*************************/

// Constantes
define("HOST","", true);
define("USER","", true);
define("PASS","", true);

// Bases de données
define("DATABASE", "", true);

// Define class
class DB
{
     private static $sql = NULL;

     public static function getInstance() {

         if (!self::$sql) {
             self::$sql = new PDO("mysql:host=".HOST.";dbname=".DATABASE, USER, PASS, array(PDO::MYSQL_ATTR_INIT_COMMAND => "SET NAMES utf8"));
             self::$sql->setAttribute(PDO::ATTR_ERRMODE, PDO::ERRMODE_EXCEPTION);
         }
         return self::$sql;
     }

     // interdiction de cloner l'instance
     private function __clone() {
     }
}

?>

Conclusion

Et voilà si vous avez bien suivi toutes les étapes votre script devrait fonctionner ! Si vous avez une question concernant ce script n'hésitez pas à m'écrire via le formulaire de contact ou via mon adresse mail. je me ferais un plaisir de vous répondre.

{

Permissivité des noms d'id : Pour permettre l'attribution d'id avec les tirets je conseille une petite modification du code dans les fichier db.php et rpc.php pour les deux fichiers, la ligne de code se situe à la ligne 22

}

la ligne de code à trouver est :

$id_sent = preg_replace("/[^0-9a-zA-Z]/","",$_REQUEST['q']);

Et doit être remplacer par le code suivant :

$id_sent = preg_replace("/[^0-9a-zA-Z-]/","",$_REQUEST['q']);

N'oubliez pas ! Il faut modifier cette même ligne de code dans les deux fichiers php mentionné plus haut, sinon ça ne fonctionnera pas.

En résumé, cette manipulation vous permettra d'utiliser les tirets et un nombres de caractères autorisés suffisant pour que vous puissiez nommez vos id de vote avec un nom explicite. Le script devient plus permissif.

Extras : Changer la couleur des étoiles

Pour changer la couleur d'ajax star rating il vous suffit de remplacer le fichier starrating.gif contenu dans le dossier image, par un autre proposé dans le pack Pack Ajax Star Rating ++ que vous pouvez télécharger juste en dessous.

telecharger star rating star rating star rating