Ajax: system do głosowania

Autor: Arkadiusz Tobiasz 9 lutego 2010

Czasem zdarza się, że chciałbyś na swojej stronie umieścić system do oceny newsów, artykułów czy wpisów. W tym wpisie chciałbym pokazać Ci w jaki sposób możesz zrobić system podobny do tego, który znajduje się na stronie wykop.pl. Wykorzystamy w nim bibliotekę jQuery.

Na początku utworzymy dwie tabele w naszej bazie danych. Pierwsza newsy będzie zawierała treść, którą użytkownik będzie mógł ocenić.

1
2
3
4
5
6
CREATE TABLE newsy
(
nid INT PRIMARY KEY AUTO_INCREMENT,
vontent TEXT,
votes INT
);

Natomiast druga tabela newsy_glosy będzie zawierała klucz z pierwszej tabeli oraz numer IP użytkownika, który już ocenił dany news. W taki sposób zapobiegniemy możliwości wielokrotnego głosowania przez jednego użytkownika (chyba, że ktoś będzie miał zmienne IP).

1
2
3
4
5
6
7
8
CREATE TABLE newsy_glosy
(
vid INT PRIMARY KEY AUTO_INCREMENT,
nid INT,
ip VARCHAR(40),
FOREIGN KEY(nid)
REFERENCES newsy(nid)
);

Teraz przechodzimy do pliku news.php, który wyświetla nasze newsy. W sekcji <head>…</head> musimy umieścić odwołanie do biblioteki jQuery. Czynimy to poprzez dodanie wpisu:

1
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.1/jquery.min.js"></script>

Dalej w tej sekcji musimy zamieścić odpowiednią funkcję, która będzie odpowiedzialna za zliczanie ilość głosów oddanych na danego newsa. Funkcja wygląda tak:

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
<script type="text/javascript">
$(function() {
$(".vote").click(function()
{
   var id = $(this).attr("id");
   var name = $(this).attr("name");
   var dataString = 'id='+ id ;
   var parent = $(this);

   if (name=='up')
   {
      $(this).fadeIn(200).html('<img src="dot.gif" />');
      $.ajax({
         type: "POST",
         url: "glosuj_plus.php",
         data: dataString,
         cache: false,

        success: function(html)
        {
            parent.html(html);
        }
      });
   }
   else
   {
      $(this).fadeIn(200).html('<img src="dot.gif" />');
      $.ajax({
         type: "POST",
         url: "glosuj_minus.php",
         data: dataString,
         cache: false,

         success: function(html)
         {
            parent.html(html);
         }
      });
   }
   return false;
});
});
</script>

Krótki komentarz. Funkcja jest wywoływana wtedy jeśli odnośnik będzie miał parametr class=”vote”. Dodatkowo odnośnik powinien zawierać jeszcze dwa parametry: id, który będzie kluczem danego newsa i name, który będzie mówił czy głos jest na plus czy na minus. W przypadku kliknięcia na odnośnik do czasu wywołania skryptu glosuj_plus.php lub glosuj_minus.php na stronie w miejscu hiperlinka będzie „opadać” obrazek, który sobie ustawisz (domyślnie jest to dot.gif). Dodatkowo funkcja przesyła parametr id do skryptu glosuj_plus.php lub glosuj_minus.php. Wyświetlmy teraz możliwość głosowania w naszych newsach:

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
<?php
include('config.php');
$sql = mysql_query("SELECT * FROM newsy LIMIT 9");
while($row = mysql_fetch_array($sql))
{
$content = $row['content'];
$nid = $row['nid'];
$votes = $row['votes'];
?>
<div class="main">
<div class="box1">
<?php if($votes >= 0) { ?>
<div class='up'>
<?php } else { ?>
<div class='down'>
<?php } ?>
<a href="" class="vote" id="<?php echo $nid; ?>" name="up">
<?php echo $votes; ?></a></div>

<div class='up-link'>
<a href="" class="vote" id="<?php echo $nid; ?>;" name="up">
<b>+</b></a></div>
</div>
<div class='down-link'>
<a href="" class="vote" id="<?php echo $nid; ?>;" name="down">
<b>-</b></a></div>
</div>

<div class='box2' ><?php echo $content; ?></div>
</div>

<?php } ?>

Skrypt wyświetli po lewej stronie aktualną liczbę głosów jaką ma dany news, a pod nim możliwość zagłosowania na plus bądź też minus. Do naszego arkusza stylu musimy dodać:

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
#main
{
height:80px;
border:1px dashed #29ABE2;
margin-bottom:7px;
width:500px;
}
.box1
{
float:left;
height:80px;
width:50px;
}
.box2
{
float:left;
width:440px;
text-align:left;
margin-left:10px;
height:60px;
margin-top:10px;
font-weight:bold;
font-size:18px;
}
.up
{
height:40px;
font-size:24px;
text-align:center;
background-color:#009900;
margin-bottom:2px;
-moz-border-radius: 6px;
-webkit-border-radius: 6px;
}
.down
{
height:40px;
font-size:24px;
text-align:center;
background-color:#cc0000;
margin-top:2px;
-moz-border-radius: 6px;
-webkit-border-radius: 6px;
}
.up-link
{
height:15px;
width: 24px;
float: left;
font-size:12px;
font-weight : bold;
text-align:center;
background-color:#009900;
margin-top:2px;
-moz-border-radius: 6px;
-webkit-border-radius: 6px;
}
.down-link
{
height:15px;
width: 24px;
font-weight : bold;
float: left;
font-size:12px;
text-align:center;
background-color:#cc0000;
margin-top:2px;
margin-left: 2px;
-moz-border-radius: 6px;
-webkit-border-radius: 6px;
}

Pozostaje jeszcze nam skrypt zliczający głosy na plus:

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
<?php
include("config.php");
$ip = $_SERVER['REMOTE_ADDR'];

if($_POST['id'])
{
   $id = $_POST['id'];
   $id = mysql_escape_String($id);

   $ip_sql = mysql_query("select ip from newsy_glosy where nid='$id' and ip='$ip'");
   $count = mysql_num_rows($ip_sql);

   if($count == 0)
   {
 
      $sql = "update newsy set votes=votes+1 where nid='$id'";
      mysql_query( $sql);

      $sql_in = "insert into newsy_glosy (nid, ip) values ('$id','$ip')";
      mysql_query( $sql_in);
      echo "<script>alert('Dzięki za głos');</script>";
   }
   else
   {
      echo "<script>alert('Już oddałeś głos');</script>";
   }

   $result = mysql_query("select votes from newsy where nid='$id'");
   $row = mysql_fetch_array($result);
   $votes_value=$row['votes'];
   echo $votes_value;

}
?>

Odpowiedz

 

Arkadiusz Tobiasz student Akademii Ekonomicznej im. Karola Adamieckiego w Katowicach na specjalnościach informatyka ekonomiczna oraz rachunkowość. Więcej...

jQuery Validation i funkcja remote

Jakiś czas temu zwrócił się do mnie użytkownik z problemem. Chodzi o to, że korzysta on z pluginu walidacji jQuery, […]

Zend Framework: integracja z Uploadify

W tym wpisie postaram się przedstawić Wam w jaki sposób zintegrować skrypt Uploadify z Zend Frameworkiem. Dzięki temu będziemy mogli […]

Javascript: Czasowe wyświetlanie reklamy

Czasami chcemy, aby na pewnym elemencie naszej strony wyświetlała się reklama przez jakiś czas, a następnie zniknęła. W tym wpisie […]

Linux: backup wszystkich baz danych MySQL

Swego czasu pisałem o tym jak z poziomu konsoli można szybko i przyjemnie zrobić backup bazy MySQL. Wszystko jest ładnie […]