Affichage de note sous forme d’étoiles

C’est très à la mode et c’est très facile à lire, alors pourquoi s’en priver ? J’ai donc décidé d’intégrer un petit widget de ce genre dans le code que je suis en train d’écrire pour afficher mes recettes de cuisine. J’ai cherché un peu sur le Web, et comme d’habitude rien ne me convenait…

Mes besoins

Afficher une note. Pas besoin que les internautes puissent voter, en tout cas pour l’instant ce n’est pas ce que je recherche.

Par contre je cherchais à avoir quelque chose qui affiche des valeurs décimales facilement, et éviter d’avoir à charger une ou des images, et gérer leur déplacement horizontal ou vertical.

Enfin je voulais un code le plus simple possible, sans CSS ni Javascript, juste une petite fonction PHP qui soit exécutée du côté serveur.

Et puis, tant qu’à faire, les micro-formats et micro-data qui correspondent, c’est bien le minimum quand on décide de coder en HTML5 et CSS3 ! Informations qui sont souvent absentes des sites majeurs de recettes de cuisine.

Ma solution

Comme je l’ai dit, une fonction PHP.

Pourquoi une fonction et pas quelques lignes de code dans ma page ? Parce que je viens de découvrir la méthodologie BEM que je trouve tout simplement géniale, depuis le temps que je peste à devoir aller chercher un peu partout des lignes de code que je sais avoir déjà écrites. Si le concept est un peu trop lourd et peu esthétique par rapport à mes besoins et mes goûts, il a été rapidement adopté et adapté. Donc, pour la facilité de réutilisation rien de tel qu’une fonction.

Je l’ai simplement appelée makeRating(), et en paramètre je lui passe la note à afficher (qui provient soit d’une base de données, soit d’un tableau PHP). J’ai également prévu qu’on puisse noter sur autre chose que 5, c’était tellement simple à ajouter que je n’ai pas voulu m’en priver. Mais bien entendu par défaut c’est sur 5.

J’ai aussi prévu qu’on puisse avoir une représentation des valeurs après la virgule, ça se fait régulièrement donc je ne voulais pas m’en priver.

Enfin pour les images, j’ai utilisé les nouvelles fonctionnalités du CSS3 (pas si nouvelles que ça en fait car très bien reconnues et implémentées mais trop méconnues) et notamment la possibilité de générer à la volée des formes géométriques en SVG. Comme on peut les remplir de la couleur que l’on veut également à la volée, y compris avec un dégradé, c’était la solution parfaite. Mais je n’ai pas prévu que le SVG soit redimensionnable, la majorité des sites affichent des étoiles de taille avoisinant 16 pixels, j’ai donc codé cette valeur en dur.

Résultat

Avant de vous montrer le code, je vous montre le rendu visuel, avec les quatre valeurs de paramètre suivantes :

makeRating(3)

makeRating(3.42)

makeRating(7, 10)

makeRating(5.72, 8)

Rating

Bien entendu les images ne sont en réalité pas si grandes, j’avais zoomé avant de faire mes copies d’écran, ce qui permet de voir que ça ne pixelise pas. Je n’ai ps créé de dégradé radial pour simuler un effet de relief, pour une dimension de 16 pixels ça aurait été peu visible et de toute façon la mode n’est plus à ce type de design.

Le code HTML produit est le suivant (pour la valeur 3.42) :

Vous remarquerez que tous les micro-formats et micro-data sont présents, mais que j’ai fait en sorte que l’affichage texte soit masqué. Il est présent dans la page mais ne pollue pas le rendu visuel. Par contre un survol des images avec la souris provoque son affichage sous forme d’info-bulle grâce à l’attribut title= »3.42 / 5″. Ce qui n’est évidemment pas visible sur l’image affichée…

Pas d’images à charger, pas besoin de JavaScript ni même de CSS ! Mais on peut cependant décider d’en ajouter, donc le paragraphe contenant la ligne d’étoiles a la classe ratingBox, il suffit de la styler à son goût.

Si on a envie d’ajouter un texte d’introduction, du genre : « Note des internautes :  » par exemple, on aura des problèmes de mise en page, puisque les étoiles iront obligatoirement sur une nouvelle ligne. À ceci il y a deux solutions :

  • solution CSS : on modifie le comportement du paragraphe avec une instruction display:inline-block; que l’on affecte à la classe ratingBox, ce qui aura pour effet que le paragraphe aura un comportement de span et se placera à la suite du texte d’introduction au lieu d’aller sur une nouvelle ligne ;
  • solution en dur : dans le code PHP on remplace les balises de paragraphe ouvrantes et fermantes (lignes 23 et 52) par des balises de span, il faudra alors insérer la fonction dans le paragraphe qui contient le texte.

Il va sans dire que je préconise la première solution, une fonction dont on doit modifier le code pour qu’elle fasse le boulot n’est plus vraiment une fonction mais du code…

Il y a bien encore une dernière solution, qui est de modifier la fonction pour lui passer un texte en argument (suggérée par Guillaume dans un courrier privé). Solution qui a un avantage et un inconvénient :

  • l’avantage est qu’on peut alors intégrer ce texte dans celui de l’infobulle de survol ;
  • l’inconvénient est que si on n’est pas satisfait du texte par défaut, et qu’on veut en passer un autre en argument, on est alors obligé de passer également la note maximale en argument, ou alors aller modifier en dur la valeur du texte par défaut, mais du coup même remarque que ci-dessus, ce n’est plus vraiment une fonction.

J’ai donc choisi de ne pas ajouter cette possibilité, mais pour ceux qui seraient intéressés voici la solution proposée par Guillaume :

  • dans la déclaration de la fonction (ligne 16) on ajoute un argument pré-défini $text = « mon texte d’ introduction :  » après la note maximale par défaut $bestvalue (ne pas oublier la virgule de séparation) :
  • dans la ligne 24 on concatène le contenu de la variable $text avec le reste en ajoutant  . $text  devant . PHP_EOL ;
  • si on veut aussi ce texte dans l’infobulle on l’ajoute également dans la même ligne devant . $rate.

J’en profite pour remercier Guillaume pour la définition de la valeur maximale par défaut, j’avais fait moins élégant…

Le code

 On ne peut pas voter ?

Non on ne peut pas ça ne sert qu’à afficher une note. Pour autoriser le vote il faudrait aussi contrôler l’authentification, ce serait bien plus complexe et pour l’instant je n’en ai pas le besoin.

Et après ?

Maintenant que ça marche, j’ai envie de faire également une version pour la difficulté de réalisation de la recette (de 1 à 5 toques de chef par exemple, mais sans gradient de couleur, c’est inutile dans ce cas), et une pour le coût de la recette (de 1 à 5 symboles de l’euro avec également un gradient de couleur). Donc quelques variables supplémentaires pour les nouveaux graphiques en svg, et un argument supplémentaire pour la fonction, pour lui dire quoi utiliser. Affaire à suivre donc…

Bookmarquez le permalien.

One Comment

  1. Merci pour cette fonction. J’avais besoin d’un fonction qui me permette uniquement d’afficher une note sur forme d’étoile.

    Pour ma part j’ai apporté quelque modification, notamment au niveau des arguments même de la fonction : j’ai ajouté un paramètre texte pour que celui-ci s’affiche devant les étoiles.

    La fonction peut-être visible à cette adresse : http://www.sdc-renov.fr/pages/satisfaction

    Pour info, j’ai une note sur 10 qui s’affiche sur 5 étoiles.

Laisser un commentaire

Votre adresse de messagerie ne sera pas publiée. Les champs obligatoires sont indiqués avec *