système de notation

Version imprimable

Voir 40 message(s) de cette discussion en une page

23/01/2014, 22h04
totot

système de notation

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?
24/01/2014, 05h25
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.
24/01/2014, 09h24
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
24/01/2014, 10h12
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.
24/01/2014, 10h13
totot

J'en trouve pas avec du php
Et je comprend pas du tout comment récupérer la valeur
24/01/2014, 10h35
Invité

Bonjour,
via Ajax.
24/01/2014, 11h14
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
24/01/2014, 11h27
sabotage

Ca sera toujours la meme chose : Ajax.
24/01/2014, 11h29
totot

Si je met un id et une valeur comme les radio boutons par exemple? Pour le dernier système
24/01/2014, 11h34
Bovino

Citation:

Envoyé par 9h24

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

Citation:

Envoyé par 11h14

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é...
24/01/2014, 11h36
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

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

Code:

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?

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:

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:

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

Bonjour,

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

Code:

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

Code:

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 !
}
// --------------

24/01/2014, 15h31
totot

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

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:

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:

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.

24/01/2014, 15h38
totot

Je doit utiliser sa:
setRequestHeader("nom","valeur")
24/01/2014, 15h43
Invité

:boulet: LIS D'ABORD LE TUTO !
24/01/2014, 15h55
Bovino

Citation:

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" ! :mouarf:
24/01/2014, 16h51
totot

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

Voir 40 message(s) de cette discussion en une page