Bonjour à tous,

Je suis actuellement en train de faire un site sur lequel je souhaiterais intégrer un système de notation avec des étoiles.

J'ai trouvé une petite base sympa ici : http://www.creativejuiz.fr/trytotry/rating-stars-with-no-js.html

Donc c'est un système de notation basique sans js et qui fonctionne avec du css.

Malheureusement je ne vois pas trop comment envoyer ça dans ma table du fait qu'il ne s'agisse pas de formulaire mais juste de lien cliquable.

Voici mon code :

	
	<style type="text/css">
		body {
			background: #FDFDFD;
			font-family: "Segoe WP","Segoe UI", Helvetica, Arial, sans-serif;
			text-align:center;
		}
		h1, h2 {
			color: #888;
			margin:0;
			font-weight:normal;
		}
		h1{ padding-top: 1.5em; padding-bottom: 2em; } 
		h2 {
			clear:both;
			color: #aaa;
			padding: 2em 0 0.3em
		}
		em {
			display: block;
			margin: .5em auto 2em;
			color: #bbb;
		}

		p, p a { 
			color: #aaa;
			text-decoration: none;
		}
		p a:hover,
		p a:focus {
			text-decoration: underline;
		}
		p + p { color: #bbb; margin-top: 2em;}
		.detail {position: absolute; text-align: right; right: 5px; bottom: 5px; width: 50%;}
		
		a[href*="intent"] {
			display:inline-block;
			margin-top: 0.4em;
			padding-left: 25px;
			background: url(full-css-microsoft-logo/bird.png) 0 4px no-repeat;
		}
		/*  
		 * Rating styles
		 */
		.rating {
			width: 226px;
			margin: 0 auto 1em;
			font-size: 45px;
			overflow:hidden;
		}
		.rating a {
			float:right;
			color: #aaa;
			text-decoration: none;
			-webkit-transition: color .4s;
			-moz-transition: color .4s;
			-o-transition: color .4s;
			transition: color .4s;
		}
		.rating a:hover,
		.rating a:hover ~ a,
		.rating a:focus,
		.rating a:focus ~ a		{
			color: orange;
			cursor: pointer;
		}
		.rating2 {
			direction: rtl;
		}
		.rating2 a {
			float:none
		}
		
	</style>
<div class="rating rating2">
		--><a href="#5" title="Give 5 stars">★</a><!--
		--><a href="#4" title="Give 4 stars">★</a><!--
		--><a href="#3" title="Give 3 stars">★</a><!--
		--><a href="#2" title="Give 2 stars">★</a><!--
		--><a href="#1" title="Give 1 star">★</a>
	</div>

Donc je tiens à préciser que je suis débutant en php mais que j'arrive en temps normal a envoyer des informations dans la base de données avec un formulaire.

Sauf que dans ce cas présent je ne vois pas comment faire car je doute qu'il soit possible de transformer ça en formulaire et sans input ou button je ne vois pas comment faire. :/

Merci à ceux qui pourront m'orienter.

Salut,

Fais passer l'info par l'url, du genre rate.php?id=726&&stars=4

Ensuite if (isset ($_GET ['id'])&&isset ($_GET ['stars'])) et là tu envoies les infos à la bdd.

-
Edité par Etoile Filante 16 novembre 2014 à 13:05:38

Salut et merci de ton aide Etoile Filante.

Il n'est pas possible de faire plus simple et de faire comme un formulaire en cliquant sur l'étoile et d'envoyer la valeur dans la bdd ?

Et si tu veux faire plus propre(sans recharger la page) passe par AJAX,

Au passage penses a vérifier si le vote est compris entre 1 et 5...

EDIT: Euh, passer par un paramètre d'URL est plus simple dans ce cas !

-
Edité par wxcqsd 16 novembre 2014 à 13:51:52

Oui le paramètre d'url peut être une bonne idée mais le problème c'est que j'utilise déjà cette méthode pour afficher mes news : http://monsite/home/?module=actualite&id=1

Donc je ne sais pas si ça peut vraiment se faire par dessus ça ?

Oui tu peux le faire sans problème, pour les liens ça donne:

<a href="?stars=1" title="Give 1 star">★</a>





Attention à la sécurité néanmoins, pense à utiliser un système de token éventuellement pour éviter des soucis CRSF

Donc j'ai testé par rapport à ce que vous m'avez dit :

<?php
if (isset ($_GET['id'])&&isset ($_GET['stars'])){
	            $posteur = $_SESSION['id'];
				$id_actualite= $_GET['id'];
				$note = $_GET['stars'];
				$addnote = $bdd->prepare("INSERT INTO `notation` VALUES ('', ?, ?, ?)");
				$addnote->execute(array($id_actualite, $posteur, $note));	
}
?>
	<style type="text/css">
		/*  
		 * Rating styles
		 */
		.rating {
			width: 226px;
			margin: 0 auto 1em;
			font-size: 45px;
			overflow:hidden;
		}
		.rating a {
			float:right;
			color: #aaa;
			text-decoration: none;
			-webkit-transition: color .4s;
			-moz-transition: color .4s;
			-o-transition: color .4s;
			transition: color .4s;
		}
		.rating a:hover,
		.rating a:hover ~ a,
		.rating a:focus,
		.rating a:focus ~ a		{
			color: orange;
			cursor: pointer;
		}
		.rating2 {
			direction: rtl;
		}
		.rating2 a {
			float:none
		}
		
	</style>
	<div class="rating rating2"><!--
		--><a href="?stars=5" title="Give 5 stars">★</a><!--
		--><a href="?stars=4" title="Give 4 stars">★</a><!--
		--><a href="?stars=3" title="Give 3 stars">★</a><!--
		--><a href="?stars=2" title="Give 2 stars">★</a><!--
		--><a href="?stars=1" title="Give 1 star">★</a>
	</div>

Par contre ça n'a pas l'air de fonctionner, est ce que je me suis trompé quelque part ?

-
Edité par Tarok 16 novembre 2014 à 15:06:06

Ouai, tu as pas mis l'id dans les liens. Il faut que tu récupère l'id du je sais pas quoi que tu veux noter et que tu l'ajoute dans chaque lien, un truc du genre 

<a href="?stars=5?id=<?php echo $_GET['id'] ?>" title="Give 5 stars">★</a>

Ah ouai et ta requête est fausse aussi. Je connais pas ta table, mais tu devrais suivre le modèle INSERT INTO matable(champ1,champ2,etc) VALUES(?,?,?,...) .

-
Edité par Etoile Filante 16 novembre 2014 à 14:49:18

D'accord merci de ton aide, du coup j'ai modifié et ça me donne ça maintenant:

	<div class="rating rating2"><!--
		--><a href="?mod=actualite&id=<?php echo $_GET['id'] ?>?stars=5" title="Give 5 stars">★</a><!--
		--><a href="?mod=actualite&id=<?php echo $_GET['id'] ?>?stars=4" title="Give 4 stars">★</a><!--
		--><a href="?mod=actualite&id=<?php echo $_GET['id'] ?>?stars=3" title="Give 3 stars">★</a><!--
		--><a href="?mod=actualite&id=<?php echo $_GET['id'] ?>?stars=2" title="Give 2 stars">★</a><!--
		--><a href="?mod=actualite&id=<?php echo $_GET['id'] ?>?stars=1" title="Give 1 star">★</a>
	</div>

Seul problème ça me renvoie une erreur au clique d'une étoile :

Fatal error: Uncaught exception 'PDOException' with message 'SQLSTATE[42000]: Syntax error or access violation: 1064 You have an error in your SQL syntax; check the manual that corresponds to your MySQL server version for the right syntax to use near '?stars=5' at line 1' in /public_html/home/modules/module-actualite.php:83 Stack trace: #0 /public_html/home/modules/module-actualite.php(83): PDO->query('SELECT id, titr...') #1 /public_html/home/html_base/page_html.php(78): require('/public_html/ho...') #2 /public_html/home/index.php(37): require('/public_html/ac...') #3 {main} thrown in /public_html/home/modules/module-actualite.php on line 83

Voici la ligne 83 de mon module actualité en question :

<?php
$getNewsQuery = $bdd->query("SELECT id, titre, posteur, contenu, DATE_FORMAT(date, '%d/%m/%Y') AS date, ' FROM `actualite` WHERE id=".$_GET['id']);
$getNews = $getNewsQuery->fetch();
?>

-
Edité par Tarok 16 novembre 2014 à 14:59:45

Bonjour, à la place de

?stars=

il faudrait

&stars=

Ah non c'est bon ça fonctionne !

Merci comar et franchement merci beaucoup Etoile Filante, j'aurais jamais réussi sans toi.

Dernière chose, possible de conserver le nombre d'étoile posté par le joueur afin qu'il ne revote pas ?

-
Edité par Tarok 16 novembre 2014 à 15:11:12

Yep, sois avec des cookies (pas très sur) soit dans la bdd. Dans la bdd, tu peut créer une table votes avec l'id des personnes qui ont voté et pour lequel, et avant d'inserer dans la bdd un vote tu vérifie qu'il n'y a pas déjà une entrée.

-
Edité par Etoile Filante 16 novembre 2014 à 15:19:02

	<?php
$posteur = $bdd->quote($_SESSION['id']);
$id_actualite= $bdd->quote($_GET['id']);
$getNewsQuery = $bdd->query("SELECT * FROM `notation` WHERE posteur=$posteur AND id_actualite=$id_actualite");
if( $getNewsQuery->fetch() !== false )
{  
   // Le visiteur a déjà voté car on a trouvé un enregistrement
 }
else
{
   echo '<div class="rating rating2"><!--
		--><a href="?mod=actualite&id='.$_GET['id'].'&stars=5" title="Give 5 stars">★</a><!--
		--><a href="?mod=actualite&id='.$_GET['id'].'&stars=4" title="Give 4 stars">★</a><!--
		--><a href="?mod=actualite&id='.$_GET['id'].'&stars=3" title="Give 3 stars">★</a><!--
		--><a href="?mod=actualite&id='.$_GET['id'].'&stars=2" title="Give 2 stars">★</a><!--
		--><a href="?mod=actualite&id='.$_GET['id'].'&stars=1" title="Give 1 star">★</a>
	</div>';
}
?>

D'accord merci, j'ai testé ça et ça vérifie si le membre a déjà voté. S'il a déjà voté alors ça n'affiche rien sauf que je voudrais que s'il a déjà voté, que ça affiche son vote en étoile mais je ne vois pas du tout comment faire.

-
Edité par Tarok 16 novembre 2014 à 15:23:07

Requête fausse

Fais une requête préparée. Btw oublies pas de sécuriser aussi quand le membre vote car n'importe qui peut changer l'url.

Au fait, au lieu de 

if( $getNewsQuery->fetch() !== false )
{ 
   // Le visiteur a déjà voté car on a trouvé un enregistrement
 }
else
{
   echo '<div class="rating rating2"><!--
        --><a href="?mod=actualite&id='.$_GET['id'].'&stars=5" title="Give 5 stars">★</a><!--
        --><a href="?mod=actualite&id='.$_GET['id'].'&stars=4" title="Give 4 stars">★</a><!--
        --><a href="?mod=actualite&id='.$_GET['id'].'&stars=3" title="Give 3 stars">★</a><!--
        --><a href="?mod=actualite&id='.$_GET['id'].'&stars=2" title="Give 2 stars">★</a><!--
        --><a href="?mod=actualite&id='.$_GET['id'].'&stars=1" title="Give 1 star">★</a>
    </div>';
}

Ce serait mieux de faire

if( $getNewsQuery->fetch() == false )
{ 
   echo '<div class="rating rating2"><!--
        --><a href="?mod=actualite&id='.$_GET['id'].'&stars=5" title="Give 5 stars">★</a><!--
        --><a href="?mod=actualite&id='.$_GET['id'].'&stars=4" title="Give 4 stars">★</a><!--
        --><a href="?mod=actualite&id='.$_GET['id'].'&stars=3" title="Give 3 stars">★</a><!--
        --><a href="?mod=actualite&id='.$_GET['id'].'&stars=2" title="Give 2 stars">★</a><!--
        --><a href="?mod=actualite&id='.$_GET['id'].'&stars=1" title="Give 1 star">★</a>
    </div>';
}

-
Edité par Etoile Filante 16 novembre 2014 à 15:58:26

Oula, je vois pas du tout comment sécuriser l'url par contre et c'est embêtant car n'importe qui peut voter plusieurs fois du coup en rentrant simplement l'url. :/

J'ai pas du être clair, il ne s'agit pas de sécuriser l'url, car on ne peut pas empêcher un utilisateur d'écrire une url.

Ce que je voulais dire c'est que quand tu es sur l'url et que tu as recu les paramètres, avant de les insérer, tu fais une requête pour vérifier que l'utilisateur n'a pas déjà mis une note.

En gros, tu fais un SELECT * FROM table WHERE id_utilisateur=? , blablbabla, puis si rowCount>0 alors tu lui dis qu'il à déjà voté, sinon tu insert.

D'accord mais ce n'est pas ce que j'ai fais ?

$posteur = $bdd->quote($_SESSION['id']);
$id_actualite = $bdd->quote($_GET['id']);
$getNewsQuery = $bdd->prepare("SELECT * FROM `notation` WHERE posteur=$posteur AND id_actualite =$id_actualite ");

Non, je te parlais de la page qui ajoute la note.

Mais comme dis précédemment, ta requête est fausse, car quand tu mets posteur=$posteur, la requête ne sait pas que tu parle de la variable posteur, il faudrait faire posteur='.$posteur.'  pour échapper à la requête. 
Sauf que là tu as changé le mot query vers prepare, donc il faut ajouter une execution de cette requête.

-
Edité par Etoile Filante 16 novembre 2014 à 16:16:26

Hello,

Je reviens vers vous pour solliciter votre aide par rapport à mon système de notation.

Donc tout fonctionne parfaitement concernant l'envoie de la note et la vérification pour éviter de voter 2 fois.

Maintenant, je souhaiterais qu'une fois que le membre a voté, que cela affiche ça note en nombre d'étoile.

Par exemple 6/10 alors 6 étoiles jaunes et 4 en gris.

Malheureusement je ne vois pas du tout comment m'y prendre.

Voici mon code :

<?php
if (isset ($_GET['id'])&& isset ($_GET['stars'])){
	            $posteur = $_SESSION['id'];
				$id_actualite= $_GET['id'];
				$note = $_GET['stars'];
$getVoteJoueur = $bdd->query("SELECT * FROM `note` WHERE posteur=$posteur AND id_actualite=$id_actualite");
if( $getVoteJoueur->fetch() !== false )
{  
   // Le membrea déjà voté
 }
			else
{
				$addnote = $bdd->prepare("INSERT INTO `note` VALUES ('', ?, ?, ?)");
				$addnote->execute(array($posteur, $id_actualite, $note));	
	echo '<div id="infos"><p style="color:green;text-align:center;">Votre note a bien été pris en compte !</p></div>';		
}
}
?>
	<style type="text/css">
		/*  
		 * Rating styles
		 */
		.rating {
		    width:290px;
            margin-top:36px;
			font-size: 35px;
			overflow:hidden;
		}
		.rating a {
			float:right;
			color: #aaa;
			text-decoration: none;
			-webkit-transition: color .4s;
			-moz-transition: color .4s;
			-o-transition: color .4s;
			transition: color .4s;
		}
		.rating a:hover,
		.rating a:hover ~ a,
		.rating a:focus,
		.rating a:focus ~ a		{
			color: orange;
			cursor: pointer;
		}
		.rating2 {
			direction: rtl;
		}
		.rating2 a {
			float:none
		}
		
	</style>

<?php
$posteur = $bdd->quote($_SESSION['id']);
$id_actualite= $bdd->quote($_GET['id']);
$getNewsQuery = $bdd->query("SELECT * FROM `note` WHERE posteur=$posteur AND id_actualite=$id_actualite");
if( $getNewsQuery->fetch() !== false )
{  
   // Le visiteur a déjà voté car on a trouvé un enregistrement
 }
else
{
   echo '<div class="rating rating2">
		--><a href="?mod=actualite&id='.$_GET['id'].'&stars=5" title="Donner 5/5">★</a><!--
		--><a href="?mod=actualite&id='.$_GET['id'].'&stars=4" title="Donner 4/5">★</a><!--
		--><a href="?mod=actualite&id='.$_GET['id'].'&stars=3" title="Donner 3/5">★</a><!--
		--><a href="?mod=actualite&id='.$_GET['id'].'&stars=2" title="Donner 2/5">★</a><!--
		--><a href="?mod=actualite&id='.$_GET['id'].'&stars=1" title="Donner 1/5">★</a>
	</div>';
}
?>

Merci à ceux qui pourront m'aider.

-
Edité par Tarok 2 décembre 2014 à 20:03:15

Salut ! Pas très difficile à faire

<?php

// Si le membre a déjà voté, affichage du nombre d'étoiles

// Etoiles jaunes

$i = 0;
while ($i != $vote) {
echo $etoilejaune;
$i++;}

// Etoiles grises

$i = 0;
while ($i != (10 - $vote)) {
echo $etoilegrise;
$i++;}

?>

Evidemment c'est très simplifié comme code. Tu peux très bien utilisé for au lieu de while. Dans mon script, $vote est le nombre que tu obtiens de la base de données, $etoilejaune est le code html de ton étoile jaune et idem pour $etoilegrise

Salut Toady,

Merci pour ta réponse.

Donc j'ai ajouté ton code au miens mais je ne vois pas comment préciser les variables $etoilejaune et $etoilegrise ?

J'ai essayé de petites choses mais ça ne donne rien de concluant, voici mon code :

<?php
$posteur = $bdd->quote($_SESSION['id']);
$id_actualite= $bdd->quote($_GET['id']);
$getNewsQuery = $bdd->query("SELECT * FROM `note` WHERE posteur=$posteur AND id_actualite=$id_actualite");
if( $getNewsQuery->fetch() !== false )
{  
// Etoiles jaunes
 
$i = 0;
while ($i != $vote) {
echo $etoilejaune;
$i++;}
 
// Etoiles grises
 
$i = 0;
while ($i != (10 - $vote)) {
echo $etoilegrise;
$i++;}
 }
else
{
   echo '<div class="rating rating2"><!--
		--><a href="?mod=actualite&id='.$_GET['id'].'&stars=5" title="Donner 5/5">★</a><!--
		--><a href="?mod=actualite&id='.$_GET['id'].'&stars=4" title="Donner 4/5">★</a><!--
		--><a href="?mod=actualite&id='.$_GET['id'].'&stars=3" title="Donner 3/5">★</a><!--
		--><a href="?mod=actualite&id='.$_GET['id'].'&stars=2" title="Donner 2/5">★</a><!--
		--><a href="?mod=actualite&id='.$_GET['id'].'&stars=1" title="Donner 1/5">★</a>
	</div>';
}
?>

 Merci d'avance à ceux qui pourront m'aider dans cette impasse.

Hello, ton $vote doit être la variable issue de la base de données, pour voir si le membre a déjà voté.

Salut Toady,

Donc en fait, c'est un peu ce que j'ai fais à la 4ème ligne de mon code, non ?

$getNewsQuery = $bdd->query("SELECT * FROM `note` WHERE posteur=$posteur AND id_actualite=$id_actualite");

Il faut juste que je remplace le $vote par $getNewsQuery ?