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

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...

Arkadiusz Tobiasz

Ajax: system do głosowania

Odpowiedz

Zend Framework: integracja z Uploadify

Linux: backup wszystkich baz danych MySQL

Zend Framework: gwiazdka przy wymaganych polach

MySQL: GROUP_CONCAT

NAJNOWSZE

TAGI

POPULARNE

Polecam

Archiwum