Pomoc - Szukaj - Użytkownicy - Kalendarz
Pełna wersja: [CSS][PHP]Star system rating - zapisywanie do bazy
Forum PHP.pl > Forum > Przedszkole
miras
26.11.2013, 10:38:57
Witam, znalazłem głosowanie w css tutaj: http://www.pmob.co.uk/temp/star-rating.htm# natomiast potrzebuję te wyniki dodawać do bazy - ma ktoś jakiś pomysł jak najprościej to zrobic? zapisywanie do bazy + wyświetlanie obecnej ilosci gwiazdek ze wszystkich glosowan..
nospor
26.11.2013, 10:46:33
No oni gwiazdki podczepiają pod A wiec ty dla A onclick podpinasz np. ajax, ktore wysle info, ze zaznaczoną taką gwiazdkę
miras
26.11.2013, 11:12:32
Wypróbuję i dam znać wieczorkiem, bo teraz już muszę zmykać..

znalazłem jeszcze chwilkę... mam coś takiego - 
[PHP] pobierz, plaintext 
  1.  
  2.  
  3.  
  4.  <script type="text/javascript">
  5. 		   $('.klik').click(function () {
  6.                 $.post('gwiazdki.php', {klik: ''}, function (data) {
  7.                     if(data != ''){
  8.                     alert(data);
  9.                     }
  10.                 });
  11.  
  12.                 return false;
  13.             });
  14. 		</script>
  15.  
  16.  
  17. </head>
  18. <body>
  19.  
  20. <ul class="rating nostar">
  21. 	<li class="one"><div class="klik"><a href="#" title="1 Star">1</a></div></li>
  22. 	<li class="two"><div class="klik"><a href="#" title="2 Stars">2</a></div></li>
  23. 	<li class="three"><div class="klik"><a href="#" title="3 Stars">3</a></div></li>
  24. 	<li class="four"><div class="klik"><a href="#" title="4 Stars">4</a></div></li>
  25. 	<li class="five"><div class="klik"><a href="#" title="5 Stars">5</a></div></li>
  26. </ul>
  27.  
  28.  
  29.  
  30.  
[PHP] pobierz, plaintext



nie wiem tylko w jakis sposób przekazać z klikanego obiektu do ajaxa ID ocenianego obiektu oraz ocenę, jaka została kliknięta?
nospor
26.11.2013, 11:32:39
Pobierz tekst A - tam masz przeciez zawarte 1,2,3,4 lub 5 i te wartosc przekazuje do ajaxa
xavierek
26.11.2013, 12:50:50
radził bym w gwiazdka.php zrobić jakiś skrypt co zapisuje do bazy z ip i przegladarkę dodadkowo ciasteczka do każdego glosowania aby uniknąć spamu i w miarę możliwości glosowanie miało jakieś znaczenie smile.gif

classa do popbierania nazwy przegladarki
[PHP] pobierz, plaintext 
  1. <?php 
  2. class Browser
  3. {
  4.     private $props    = array("Version" => "0.0.0",
  5.                                 "Name" => "unknown",
  6.                                 "Agent" => "unknown") ;
  7.  
  8.     public function __Construct()
  9.     {
  10.         $browsers = array("firefox", "msie", "opera", "chrome", "safari",
  11.                             "mozilla", "seamonkey",    "konqueror", "netscape",
  12.                             "gecko", "navigator", "mosaic", "lynx", "amaya",
  13.                             "omniweb", "avant", "camino", "flock", "aol");
  14.  
  15.         $this->Agent = strtolower($_SERVER['HTTP_USER_AGENT']);
  16.         foreach($browsers as $browser)
  17.         {
  18.             if (preg_match("#($browser)[/ ]?([0-9.]*)#", $this->Agent, $match))
  19.             {
  20.                 $this->Name = $match[1] ;
  21.                 $this->Version = $match[2] ;
  22.                 break ;
  23.             }
  24.         }
  25.     }
  26.  
  27.     public function __Get($name)
  28.     {
  29.         if (!array_key_exists($name, $this->props))
  30.         {
  31.             die ("No such property or function $name") ;
  32.         }
  33.         return $this->props[$name] ;
  34.     }
  35.  
  36.     public function __Set($name, $val)
  37.     {
  38.         if (!array_key_exists($name, $this->props))
  39.         {
  40.             SimpleError("No such property or function.", "Failed to set $name", $this->props) ;
  41.             die ;
  42.         }
  43.         $this->props[$name] = $val ;
  44.     }
  45.  
  46. }
  47. ?>
[PHP] pobierz, plaintext


tak wykorzystujemy
[PHP] pobierz, plaintext 
  1. $Browser = new Browser;
  2. $Browser->Name
[PHP] pobierz, plaintext
miras
5.12.2013, 17:21:42
troszkę odgrzebię, ale wróciłem do tematu i mam problem, kod:

[HTML] pobierz, plaintext 
  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
  2. <html xmlns="http://www.w3.org/1999/xhtml">
  3. <head><meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
  4. <script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
  5. <title>CSS Star Rating System</title>
  6. <style type="text/css">
  7. .rating{
  8. 	width:80px;
  9. 	height:16px;
  10. 	margin:0 0 20px 0;
  11. 	padding:0;
  12. 	list-style:none;
  13. 	clear:both;
  14. 	position:relative;
  15. 	background: url(img/star-matrix.gif) no-repeat 0 0;
  16. }
  17.  
  18.  
  19. .nostar {background-position:0 0}
  20. .onestar {background-position:0 -16px}
  21. .twostar {background-position:0 -32px}
  22. .threestar {background-position:0 -48px}
  23. .fourstar {background-position:0 -64px}
  24. .fivestar {background-position:0 -80px}
  25. ul.rating li {
  26. 	cursor: pointer;
  27. 	float:left;
  28. 	text-indent:-999em;
  29. }
  30.  
  31. ul.rating li a {
  32. 	position:absolute;
  33. 	left:0;
  34. 	top:0;
  35. 	width:16px;
  36. 	height:16px;
  37. 	text-decoration:none;
  38. 	z-index: 200;
  39. }
  40. ul.rating li.one a {left:0}
  41. ul.rating li.two a {left:16px;}
  42. ul.rating li.three a {left:32px;}
  43. ul.rating li.four a {left:48px;}
  44. ul.rating li.five a {left:64px;}
  45. ul.rating li a:hover {
  46. 	z-index:2;
  47. 	width:80px;
  48. 	height:16px;
  49. 	overflow:hidden;
  50. 	left:0;	
  51. 	background: url(img/star-matrix.gif) no-repeat 0 0
  52. }
  53. ul.rating li.one a:hover {background-position:0 -96px;}
  54. ul.rating li.two a:hover {background-position:0 -112px;}
  55. ul.rating li.three a:hover {background-position:0 -128px}
  56. ul.rating li.four a:hover {background-position:0 -144px}
  57. ul.rating li.five a:hover {background-position:0 -160px}
  58.  
  59. h3{margin:0 0 2px 0;font-size:110%}
  60.  
  61. </style>
  62.  
  63.  
  64.         <script type="text/javascript">
  65. 		   $('a').click(function () {
  66.                 $.post('gwiazdkix.php', {a: ''}, function (data) {
  67.                     if(data != ''){
  68.                     alert(data);
  69.                     }
  70.                 });
  71.  
  72.                 return false;
  73.             });
  74. 		</script>
  75.  
  76.  
  77. </head>
  78. <body>
  79.  
  80. <ul class="rating nostar">
  81. 	<li class="one"><div class="klik"><a href="#" title="1 Star">1id</a></div></li>
  82. 	<li class="two"><div class="klik"><a href="#" title="2 Stars">2</a></div></li>
  83. 	<li class="three"><div class="klik"><a href="#" title="3 Stars">3</a></div></li>
  84. 	<li class="four"><div class="klik"><a href="#" title="4 Stars">4</a></div></li>
  85. 	<li class="five"><div class="klik"><a href="#" title="5 Stars">5</a></div></li>
  86. </ul>
  87.  
  88. <ul class="rating onestar">
  89. 	<li class="one"><div class="klik"><a href="#" title="1 Star">1</a></div></li>
  90. 	<li class="two"><div class="klik"><a href="#" title="2 Stars">2</a></div></li>
  91. 	<li class="three"><div class="klik"><a href="#" title="3 Stars">3</a></div></li>
  92. 	<li class="four"><div class="klik"><a href="#" title="4 Stars">4</a></div></li>
  93. 	<li class="five"><div class="klik"><a href="#" title="5 Stars">5</a></div></li>
  94. </ul>
  95.  
  96. <ul class="rating twostar">
  97. 	<li class="one"><div class="klik"><a href="#" title="1 Star">1</a></div></li>
  98. 	<li class="two"><div class="klik"><a href="#" title="2 Stars">2</a></div></li>
  99. 	<li class="three"><div class="klik"><a href="#" title="3 Stars">3</a></div></li>
  100. 	<li class="four"><div class="klik"><a href="#" title="4 Stars">4</a></div></li>
  101. 	<li class="five"><div class="klik"><a href="#" title="5 Stars">5</a></div></li>
  102. </ul>
  103.  
  104. <ul class="rating threestar">
  105. 	<li class="one"><div class="klik"><a href="#" title="1 Star">1</a></div></li>
  106. 	<li class="two"><div class="klik"><a href="#" title="2 Stars">2</a></div></li>
  107. 	<li class="three"><div class="klik"><a href="#" title="3 Stars">3</a></div></li>
  108. 	<li class="four"><div class="klik"><a href="#" title="4 Stars">4</a></div></li>
  109. 	<li class="five"><div class="klik"><a href="#" title="5 Stars">5</a></div></li>
  110. </ul>
  111.  
  112. <ul class="rating fourstar">
  113. 	<li class="one"><div class="klik"><a href="#" title="1 Star">1</a></div></li>
  114. 	<li class="two"><div class="klik"><a href="#" title="2 Stars">2</a></div></li>
  115. 	<li class="three"><div class="klik"><a href="#" title="3 Stars">3</a></div></li>
  116. 	<li class="four"><div class="klik"><a href="#" title="4 Stars">4</a></div></li>
  117. 	<li class="five"><div class="klik"><a href="#" title="5 Stars">5</a></div></li>
  118. </ul>
  119.  
  120. <ul class="rating fivestar">
  121. 	<li class="one"><div class="klik"><a href="#" title="1 Star">1</a></div></li>
  122. 	<li class="two"><div class="klik"><a href="#" title="2 Stars">2</a></div></li>
  123. 	<li class="three"><div class="klik"><a href="#" title="3 Stars">3</a></div></li>
  124. 	<li class="four"><div class="klik"><a href="#" title="4 Stars">4</a></div></li>
  125. 	<li class="five"><div class="klik"><a href="#" title="5 Stars">5</a></div></li>
  126. </ul>
  127.  
  128.  
  129. </body></html>
[HTML] pobierz, plaintext


w pliku gwiazdkix.php mam tylko tekst "test", żeby sprawdzić czy to działa i niestety w alercie nic mi nie wyświetla...
_Borys_
5.12.2013, 18:20:51
1. Dołącz jquery //ok jest
2. Kod javascript/jquery osadź w $(function(){ kod });
miras
5.12.2013, 18:48:15
no i nadal nie działa...


[HTML] pobierz, plaintext 
  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
  2. <html xmlns="http://www.w3.org/1999/xhtml">
  3. <head><meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
  4. <script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
  5. <title>CSS Star Rating System</title>
  6. <style type="text/css">
  7. .rating{
  8. 	width:80px;
  9. 	height:16px;
  10. 	margin:0 0 20px 0;
  11. 	padding:0;
  12. 	list-style:none;
  13. 	clear:both;
  14. 	position:relative;
  15. 	background: url(img/star-matrix.gif) no-repeat 0 0;
  16. }
  17.  
  18.  
  19. .nostar {background-position:0 0}
  20. .onestar {background-position:0 -16px}
  21. .twostar {background-position:0 -32px}
  22. .threestar {background-position:0 -48px}
  23. .fourstar {background-position:0 -64px}
  24. .fivestar {background-position:0 -80px}
  25. ul.rating li {
  26. 	cursor: pointer;
  27. 	float:left;
  28. 	text-indent:-999em;
  29. }
  30.  
  31. ul.rating li a {
  32. 	position:absolute;
  33. 	left:0;
  34. 	top:0;
  35. 	width:16px;
  36. 	height:16px;
  37. 	text-decoration:none;
  38. 	z-index: 200;
  39. }
  40. ul.rating li.one a {left:0}
  41. ul.rating li.two a {left:16px;}
  42. ul.rating li.three a {left:32px;}
  43. ul.rating li.four a {left:48px;}
  44. ul.rating li.five a {left:64px;}
  45. ul.rating li a:hover {
  46. 	z-index:2;
  47. 	width:80px;
  48. 	height:16px;
  49. 	overflow:hidden;
  50. 	left:0;	
  51. 	background: url(img/star-matrix.gif) no-repeat 0 0
  52. }
  53. ul.rating li.one a:hover {background-position:0 -96px;}
  54. ul.rating li.two a:hover {background-position:0 -112px;}
  55. ul.rating li.three a:hover {background-position:0 -128px}
  56. ul.rating li.four a:hover {background-position:0 -144px}
  57. ul.rating li.five a:hover {background-position:0 -160px}
  58.  
  59. h3{margin:0 0 2px 0;font-size:110%}
  60.  
  61. </style>
  62.  
  63.  
  64.         <script type="text/javascript">
  65. 		 $(function(){
  66. 		   $('a').click(function () {
  67.                 $.post('gwiazdkix.php', {a: ''}, function (data) {
  68.                     if(data != ''){
  69.                     alert(data);
  70.                     }
  71.                 });
  72.  
  73.                 return false;
  74.             });
  75. 		}
  76. 		</script>
  77.  
  78.  
  79. </head>
  80. <body>
  81.  
  82. <ul class="rating nostar">
  83. 	<li class="one"><div class="klik"><a href="#" title="1 Star">1id</a></div></li>
  84. 	<li class="two"><div class="klik"><a href="#" title="2 Stars">2</a></div></li>
  85. 	<li class="three"><div class="klik"><a href="#" title="3 Stars">3</a></div></li>
  86. 	<li class="four"><div class="klik"><a href="#" title="4 Stars">4</a></div></li>
  87. 	<li class="five"><div class="klik"><a href="#" title="5 Stars">5</a></div></li>
  88. </ul>
  89.  
  90. <ul class="rating onestar">
  91. 	<li class="one"><div class="klik"><a href="#" title="1 Star">1</a></div></li>
  92. 	<li class="two"><div class="klik"><a href="#" title="2 Stars">2</a></div></li>
  93. 	<li class="three"><div class="klik"><a href="#" title="3 Stars">3</a></div></li>
  94. 	<li class="four"><div class="klik"><a href="#" title="4 Stars">4</a></div></li>
  95. 	<li class="five"><div class="klik"><a href="#" title="5 Stars">5</a></div></li>
  96. </ul>
  97.  
  98. <ul class="rating twostar">
  99. 	<li class="one"><div class="klik"><a href="#" title="1 Star">1</a></div></li>
  100. 	<li class="two"><div class="klik"><a href="#" title="2 Stars">2</a></div></li>
  101. 	<li class="three"><div class="klik"><a href="#" title="3 Stars">3</a></div></li>
  102. 	<li class="four"><div class="klik"><a href="#" title="4 Stars">4</a></div></li>
  103. 	<li class="five"><div class="klik"><a href="#" title="5 Stars">5</a></div></li>
  104. </ul>
  105.  
  106. <ul class="rating threestar">
  107. 	<li class="one"><div class="klik"><a href="#" title="1 Star">1</a></div></li>
  108. 	<li class="two"><div class="klik"><a href="#" title="2 Stars">2</a></div></li>
  109. 	<li class="three"><div class="klik"><a href="#" title="3 Stars">3</a></div></li>
  110. 	<li class="four"><div class="klik"><a href="#" title="4 Stars">4</a></div></li>
  111. 	<li class="five"><div class="klik"><a href="#" title="5 Stars">5</a></div></li>
  112. </ul>
  113.  
  114. <ul class="rating fourstar">
  115. 	<li class="one"><div class="klik"><a href="#" title="1 Star">1</a></div></li>
  116. 	<li class="two"><div class="klik"><a href="#" title="2 Stars">2</a></div></li>
  117. 	<li class="three"><div class="klik"><a href="#" title="3 Stars">3</a></div></li>
  118. 	<li class="four"><div class="klik"><a href="#" title="4 Stars">4</a></div></li>
  119. 	<li class="five"><div class="klik"><a href="#" title="5 Stars">5</a></div></li>
  120. </ul>
  121.  
  122. <ul class="rating fivestar">
  123. 	<li class="one"><div class="klik"><a href="#" title="1 Star">1</a></div></li>
  124. 	<li class="two"><div class="klik"><a href="#" title="2 Stars">2</a></div></li>
  125. 	<li class="three"><div class="klik"><a href="#" title="3 Stars">3</a></div></li>
  126. 	<li class="four"><div class="klik"><a href="#" title="4 Stars">4</a></div></li>
  127. 	<li class="five"><div class="klik"><a href="#" title="5 Stars">5</a></div></li>
  128. </ul>
  129.  
  130.  
  131. </body></html>
[HTML] pobierz, plaintext
werdan
5.12.2013, 18:54:41 
[HTML] pobierz, plaintext 
  1. $(function(){
  2. 		   $('a').click(function () {
  3.                 $.post('gwiazdkix.php', {a: ''}, function (data) {
  4.                     if(data != ''){
  5.                     alert(data);
  6.                     }
  7.                 });
  8.  
  9.                 return false;
  10.             });
  11. 		});
[HTML] pobierz, plaintext


Nie dales ); na końcu
_Borys_
5.12.2013, 18:55:43
Nawias ) na końcu jeszcze, sprawdzaj błędy w konsoli, to podstawa.
A jak chcesz pobrać wartość klikniętego <a> to 
[JAVASCRIPT] pobierz, plaintext 
  1. var aa = $(this).text();
[JAVASCRIPT] pobierz, plaintext

i potem przesyłasz do php
[JAVASCRIPT] pobierz, plaintext 
  1. $.post('gwiazdkix.php', {a: aa}, function (data) {
[JAVASCRIPT] pobierz, plaintext
miras
5.12.2013, 19:02:04
Ok, wszystko działa, powiedzcie jeszcze prosze jak odbierac te dane?

[PHP] pobierz, plaintext 
  1. <?php var_dump($_POST['data']); ?>
[PHP] pobierz, plaintext

nie działa.
werdan
5.12.2013, 19:08:29 
[PHP] pobierz, plaintext 
  1. <?php var_dump($_POST['a']); ?>
[PHP] pobierz, plaintext


Przeciez wysyłajsz jako a
_Borys_
5.12.2013, 19:08:31
Czemu $_POST['data'] ?
Przesyłasz 'a' przecież
print_r($_POST); i będziesz wiedział co przesyłasz
To jest wersja lo-fi głównej zawartości. Aby zobaczyć pełną wersję z większą zawartością, obrazkami i formatowaniem proszę kliknij tutaj.
Invision Power Board © 2001-2025 Invision Power Services, Inc.