Discussion :

[totot]

Bonsoir,

Je suis entrain de développer un site et je cherche à faire un système de notation avec étoiles de 1 à 5. Le problème c'est que j'ai trouvé plein de script sur le net et sur le forum mais il ne fonctionne. De plus, je voudrai pouvoir sauvegarder cette note dans la base de donnée.

Pouvez-vous m'aidez?

[sabotage]

Ca m'ettonerait qu'aucun script ne fonctionne.
Ca ne serait pas plutôt que tu n'as pas réussi à les utiliser ?

Commence par choisir un "star rater" qui te plait et montre nous ce que tu en as fais et dis nous ce qui ne fonctionne pas.

[totot]

J'ai trouvé ce système que j'ai mi en place:
http://bootply.com/92166#

Maintenant je ne vois pas comment récupérer la note attribuer pour la mettre dans la bdd

[sabotage]

Tu as les commandes de bases dans la doc :
https://github.com/dobtco/starrr#listen-for-events

Ici dans l'exemple, il a juste une "alert"; pour l'enregistrement dans ta base de donnée il faut passer par de l'Ajax.

Bref tout ça n'a plus trop de rapport avec PHP.

[totot]

J'en trouve pas avec du php
Et je comprend pas du tout comment récupérer la valeur

[Invité]

Bonjour,
via Ajax.

[totot]

Sinon je viens de trouver sa :
http://www.creativejuiz.fr/blog/tuto...ues-lignes-css
Mais comment faire pour récupérer la note pour l'inséré dans la base

[sabotage]

Ca sera toujours la meme chose : Ajax.

[totot]

Si je met un id et une valeur comme les radio boutons par exemple? Pour le dernier système

[Bovino]

J'ai trouvé ce système que j'ai mi en place

Sinon je viens de trouver sa

La première des choses, c'est déjà de comprendre que la bonne méthode, ce n'est pas de copier coller du code qu'on ne comprend pas, vérifier que ce code nécessite un minimum d'adaptation qu'on ne veut pas faire puis passer à un autre jusqu'à ce qu'un miracle advienne...
Il faut prendre un minimum de temps pour lire la documentation, comprendre le fonctionnement puis intégrer le code comme prévu par celui qui l'a codé...

[totot]

J'ai réussi à intégrer le code de 11h14,
Je cherche juste à récupérer la note en php.
Je vais essayer un système de id et valeur comme avec les radio boutons

[totot]

J'ai fait un système d'id et de valeur comme ceic:

Code html :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
<a href="#5" id="note" value="5" title="Donner 5 étoiles">☆</a> 
<a href="#4" id="note" value="4" title="Donner 4 étoiles">☆</a>
<a href="#3" id="note" value="3" title="Donner 3 étoiles">☆</a>
<a href="#2" id="note" value="2" title="Donner 2 étoiles">☆</a>
<a href="#1" id="note" value="1" title="Donner 1 étoile">☆</a>

Maintenant, comme je peut récupérer la valeur?

[totot]

J'ai finalement pris celui-ci qui est mieux mais j'arrive pas à récupéré la note, j'ai toujours 0 qui s'insère dans la base: http://www.forum-webmaster.com/forum...he/t24758.html

javascript:

Code javascript :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
var n = 5;
function init(){
var html = '';
for (i=0; i<n; i++){
id = i+1;
html += '<img src="images/starOut.png" ';
html += 'id="star" value="off" ';
html += 'onMouseOver="over('+id+');" ';
html += 'onMouseOut="out('+id+');" ';
html += 'onClick="on('+id+')"/></a>'
}
document.getElementById("note").innerHTML = html;
}
 
function over(nb){
elemClassement = document.getElementById("note");
tabImg = elemClassement.getElementsByTagName("img");
 
if (nb > 0)
for (i=0; i<nb; i++)
tabImg[i].src="images/starOver.png";
for (i=nb; i<n; i++)
tabImg[i].src="images/starOut.png";
}
 
function out(nb){
elemClassement = document.getElementById("note");
tabImg = elemClassement.getElementsByTagName("img");
 
for (i=0; i<nb; i++)
tabImg[i].src="images/starOut.png";
for (i=0; i<n; i++){
if (tabImg[i].value == "on")
tabImg[i].src="images/starOver.png";
}
}
 
function on(nb){
elemClassement = document.getElementById("note");
tabImg = elemClassement.getElementsByTagName("img");
 
for (i=0; i<nb; i++){
tabImg[i].src="images/starOver.png";
tabImg[i].value="on";
}
for (i=nb; i<n; i++){
tabImg[i].src="images/starOut.png";
tabImg[i].value="off";
}
 
}

html

Code html :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
<div id="note" name="cls">
<script>init();</script>
</div>

[Invité]

Bonjour,

=> voir : http://codepen.io/jreaux62/pen/yuzgD

Code html :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
<div id="note" name="cls"></div>
<div id="notechoisie"></div>

Code js :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
onload = function(){
  init();
};
// --------------
var StarOutSrc = 'http://www.developpez.net/forums/images/smilies/zoubi.gif';
var StarOnSrc = 'http://www.developpez.net/forums/images/smilies/heart.gif';
var n = 5;
// --------------
function init(){
	var html = '';
	for (i=0; i<n; i++){
		id = i+1;
		html += '<img src="'+StarOutSrc+'" ';
		html += 'id="star" value="off" ';
		html += 'onMouseOver="over('+id+');" ';
		html += 'onMouseOut="out('+id+');" ';
		html += 'onClick="on('+id+')"/></a>'
	}
	document.getElementById("note").innerHTML = html;
}
// --------------
function over(nb){
	elemClassement = document.getElementById("note");
	tabImg = elemClassement.getElementsByTagName("img");
 
	if (nb > 0){
		for (i=0; i<nb; i++){
			tabImg[i].src = StarOnSrc;
		}
	}
	for (i=nb; i<n; i++){
		tabImg[i].src = StarOutSrc;
	}
}
// --------------
function out(nb){
  elemClassement = document.getElementById("note");
  tabImg = elemClassement.getElementsByTagName("img");
 
  for (i=0; i<nb; i++){
    tabImg[i].src = StarOutSrc;
  }
  for (i=0; i<n; i++){
    if (tabImg[i].value == "on")
       tabImg[i].src = StarOnSrc;
    }
  }
// --------------
function on(nb){
  elemClassement = document.getElementById("note");
  tabImg = elemClassement.getElementsByTagName("img");
 
  for (i=0; i<nb; i++){
    tabImg[i].src = StarOnSrc;
    tabImg[i].value="on";
  }
  for (i=nb; i<n; i++){
    tabImg[i].src = StarOutSrc;
    tabImg[i].value = "off";
  }
  // ICI, on peut lancer une procédure AJAX
  // -> pour enregistrer la valeur en BdD
  notationAjax(nb);
 
}
// --------------
function notationAjax(nb){
//  alert('Vous avez choisi : '+nb);
  document.getElementById("notechoisie").innerHTML = 'Vous avez choisi : '+nb;
  // écrire ICI le code AJAX !
}
// --------------

[totot]

C'est bien $note que je doit prendre pour insérer dans la base?

[Invité]

Il faut que tu apprennes à utiliser AJAX :
=> Web 2.0, allez plus loin avec AJAX et XMLHttpRequest

Dans mon exemple ci-dessus, j'ai une fonction JavaScript : notationAjax(nb).
nb est la valeur à transmettre !

LIS D'ABORD LE TUTO !

Code js :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
// Création de l'objet XmlHttpRequest
	function getXhr(){
	var xhr = null; 
	if(window.XMLHttpRequest){ // Firefox et autres
		xhr = new XMLHttpRequest(); 
	} else if(window.ActiveXObject){ // Internet Explorer 
		try {
			xhr = new ActiveXObject("Msxml2.XMLHTTP");
		} catch (e) {
			xhr = new ActiveXObject("Microsoft.XMLHTTP");
		}
	} else { // XMLHttpRequest non supporté par le navigateur 
		alert("Votre navigateur ne supporte pas les objets XMLHTTPRequest..."); 
		xhr = false; 
	} 
	return xhr;
}

fonction JavaScript notationAjax(nb) :

Code js :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
notationAjax(nb){
	var xhr = getXhr()
	// On défini ce qu'on va faire quand on aura la réponse
	xhr.onreadystatechange = function(){
		// On ne fait quelque chose que si on a tout reçu et que le serveur est ok
		if(xhr.readyState == 4 && xhr.status == 200){
//			alert(xhr.responseText);
			document.getElementById("notechoisie").innerHTML = 'Vous avez choisi : '+nb;
		}
	}
	xhr.open("GET","notation-ajax.php", true);
	xhr.send('note='+nb); // on transmet la note
}

La page PHP : notation-ajax.php
=> C'est ici :

• qu'on récupère la note : $note = $_GET['note'];;
• et l'enregistre dans la BdD.

[totot]

Je doit utiliser sa:
setRequestHeader("nom","valeur")

[Invité]

LIS D'ABORD LE TUTO !

[Bovino]

J'ai réussi à intégrer le code

On ne doit pas avoir la même notion de ce que signifie "intégrer un code" !

[totot]

Je l'ai lu le tuto et à part ce que je t'ai proposer je ne vois pas