Attribuer des points à un article

Etude de cas

00

L'idée

Cela est utilisé notamment sur les sites d'information collaboratifs, on clique sur une image pour indiquer que l'on apprécie l'article, et les articles qui obtiennent le plus de points vont en première page du site.
On va voir comment réaliser ce système de notation avec quelques fonctions JavaScript et une feuille de style.
Pour cela on utilisera un fichier qui enregistrara le nombre de point obtenus par l'article, portant le nom de la page avec l'extension .dat.

La feuille de style

Elle définit l'image qui contient le nombre de points:

.markstyle
{
	font-family: "Trebuchet MS", Arial, sans;
	font-size: 40px;
	border-top:2px solid #0C0;
	border-left:2px solid #0C0;
	border-right:2px solid #060;
	border-bottom:2px solid #060;
	background-color:#0B0;
	text-align:center;
	width:64px;
	color:#FFF;
	padding-left:8px;
	padding-right:8px;
}

On peut facilement modifier les couleurs, la police de caractère, la taille...

Le programme JavaScript

Quelque fonctions sont nécessaires pour récupérer le nombre de point dans un fichier et le sauver, ainsi que pour afficher ce nombre.

function read(url, fun, element)

Fonction Ajax appelée à chaque chargement de la page qui contient l'article à noter, avec le nom du compteur, la fonction initialize en callback et l'élément de la page pour l'affichage.

function writeFile(url)
La fonction writeFile complète la bibliothèque Ajax et permet de passer des données à un script PHP qui va stocker le nombre de points et autres données éventuelles. 
function initialize(valeur, element)
C'est un callback, une fonction donnée en argument d'une fonction Ajax qui lit le fichier de données. Dans cette démo il ne contient que le nombre de points pour cette page. 
function display(entier, element)
Cette fonction est appelée par la fonction mark et par le callback initialize pour afficher le score.
Le nombre de points est limité à 99 dans cette démo. 
function mark(element)
La fonction principale qui est appelée quand on clique sur l'image. Elle incrémente le nombre de votes affiché et utilise Ajax donner le nom de la page à un script qui conserve le nombre de vote dans un fichier. Elle appelle aussi la fonction display. 
window.onload=function()
{
	dataURL = changeExtension(location.href, ".dat");
	var element = document.getElementById("mark");
	read(dataURL, initialize, element);
}
Quand on charge la page, il faut que l'image s'affiche avec le nombre de points obtenus jusque là. Ce sera accomplit par l'évènement onload de window, auquel on associe la fonction ci-dessus qui utilise Ajax pour lire le nombre de points conservé dans un fichier.
DataURL est le nom de ce fichier, il est fabriqué à partir du nom de la page qui appelle la fonction.

Empêcher les votes multiples

Pour empêcher un même lecteur d'ajouter plus d'un point à l'article, on peut:

  1. Tester son adresse IP, l'ajouter dans une liste et ignorer les clics venant d'une même addresse IP.
    Mais l'inconvénent est que des adresses IP dynamiques sont utilisées par différents utilisateurs.
  2. Installer des cookies sur les machines des utilisateurs.
    Ici l'inconvénient est qu'il en faudrait pour chaque article et chaque visiteur qui aurait cliqué, on n'en sortirait pas.
  3. Demander aux utilisateurs de s'enregistrer avant de marquer les articles. Cela peut requérir aussi, pour empêcher les enregistrements multiples, d'installer des cookies, mais un seul par utilisateur enregistré. On peut ensuite gérer la liste des clics pour chaque utilisateur.
Le script d'authentification des utilisateurs va au-dela du sujet de cet article, mais il est développé par ailleurs dans le tutoriel Construire un CMS, voir Authentification.

Télécharger

© 2006-2014 Xul.fr