Sistema de Votación

martuanez · #1 (**permalink**) 13/01/2009, 15:33

Estoy intentando crear un sistema de votaciones de muchas busquedas esta es la opción con la que me quede, en esta página
http://www.ejwebdevelopment.com/ en este link How to Create an AJAX Based Voting System, ahora el problema esta en que yo he quedado con estos archivos:

displaystar.php:

Cita:

<html>

<head><style type="text/css">
.starOn{
background-image: url("/images/full-star.gif");
background-repeat: no-repeat;
width: 10px;
height: 10px;
}
.starOff{
background-image: url("/images/clear-star.gif");
background-repeat: no-repeat;
width: 10px;
height: 10px;
}
</style>
<title></title>
</head>

<body>

<?php
include_once("vote.php");

function displayRating($item)
{
echo "<div id=\"processingDiv-$item\" style=\"display:none\">\n";
?>
<img src="ajax-loader.gif"></div>
<?php
echo "<table border=\"0\" cellpadding=\"0\" cellspacing=\"0\"><tr>\n";
for ($i=1; $i<=10; $i++)
{
if ($i == 1) $class = "starOn"; else $class = "starOff";
echo "<td>\n";
echo "<div class=\"$class\" id=\"ratings-$item-$i\" onmouseout=\"javascript:HoverStars('$item', 1)\" onmouseover='javascript:HoverStars('$item', $i)\" onmouseup=\"javascript:SubmitVote($i, '$item')\"></div>\n";
echo "</td>\n";
}
echo "</tr></table>\n";

}

?>
<script type="text/javascript">
function ajaxSubmit(url, processingDiv, targetDiv)
{
targetArea = document.getElementById(targetDiv);
processingArea = document.getElementById(processingDiv);

var xmlHttp;
try
{ xmlHttp=new XMLHttpRequest(); }
catch (e)
{
try
{ xmlHttp=new ActiveXObject('Msxml2.XMLHTTP'); }
catch (e)
{
try
{ xmlHttp=new ActiveXObject('Microsoft.XMLHTTP'); }
catch (e)
{
alert('Your browser does not support AJAX!');
return false;
}
}
}

xmlHttp.onreadystatechange=function()
{
if(xmlHttp.readyState==4)
{
processingArea.style.display = 'none';
targetArea.innerHTML = xmlHttp.responseText;
}
}

processingArea.style.display = 'block';
xmlHttp.open('GET',url,true);
xmlHttp.send(null);
}

function SubmitVote(vote, item)
{
var poststr = 'vote.php' +
'?item=' + item +
'&vote=' + vote;

LockStars(item, vote);
ajaxSubmit(poststr, 'processingDiv-'+item, 'ratingDiv-'+item);
}

function HoverStars(item, star)
{
var starCount;
for (starCount=1; starCount<=star; starCount++)
document.getElementById('ratings-'+item+'-'+starCount.toString()).className = 'starOn';
for (starCount=star+1; starCount<=10; starCount++)
document.getElementById('ratings-'+item+'-'+starCount.toString()).className = 'starOff';
}

function LockStars(item, star)
{
var starCount;
for (starCount=1; starCount<=star; starCount++)
{
document.getElementById('ratings-'+item+'-'+starCount.toString()).className = 'starOn';
document.getElementById('ratings-'+item+'-'+starCount.toString()).onmouseover = null;
document.getElementById('ratings-'+item+'-'+starCount.toString()).onmouseout = null;
document.getElementById('ratings-'+item+'-'+starCount.toString()).onmouseup = 'javascript:void(0);';
}
for (starCount=star+1; starCount<=10; starCount++)
{
document.getElementById('ratings-'+item+'-'+starCount.toString()).className = 'starOff';
document.getElementById('ratings-'+item+'-'+starCount.toString()).onmouseover = null;
document.getElementById('ratings-'+item+'-'+starCount.toString()).onmouseout = null;
document.getElementById('ratings-'+item+'-'+starCount.toString()).onmouseup = 'javascript:void(0);';
}
}
</script>
<?php

for ($item=0; $item<=10; $item++)
displayRating($item);
function displayRating($item)
{
echo "<div id=\"processingDiv-$item\" style=\"display:none\">
?>
<img src="ajax-loader.gif"></div>
<?php
echo "<table border=\"0\" cellpadding=\"0\" cellspacing=\"0\"><tr>\n";
for ($i=1; $i<=10; $i++)
{
if ($i == 1) $class = "starOn"; else $class = "starOff";
echo "<td>\n";
echo "<div class=\"$class\" id=\"ratings-$item-$i\" onmouseout=\"javascript:HoverStars('$item', 1)\" ";
echo "onmouseover=\"javascript:HoverStars('$item', $i)\" onmouseup=\"javascript:SubmitVote($i, '$item')\"></div>\n";
echo "</td>\n";
}
echo "</tr></table>\n";
}
?>
</body>

</html>

vote.php

Cita:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Documento sin título</title>
</head>

<body>
<?php

include_once("displaystar.php");

$dbhost = "localhost";
$dbuser = "root";
$dbpass = "";
$db = "votar";

$connection = mysql_connect($dbhost, $dbuser, $dbpass);
$connection = dbConnect();

if (isset($_REQUEST["item"])) $item = $_REQUEST["item"];
if (isset($_REQUEST["vote"])) $vote = $_REQUEST["vote"];
if ((is_numeric($vote)) && ($vote <= 10))
SubmitVote($item, $vote);

function SubmitVote($item, $vote)
{
$getVoteQuery = "SELECT voteavg, votes from yourtable where id = $item";
$getVoteResult = mysql_query($getVoteQuery);

$currentVoteCount = mysql_result($getVoteResult, 0, "votes");
$currentVote = mysql_result($getVoteResult, 0, "voteavg");

$newVoteCount = $currentVoteCount+1;
$newVote = (($currentVote * $currentVoteCount)+$vote) / ($newVoteCount);

$newVote = Round($newVote, 2);
$updateVoteQuery = "UPDATE `yourtable` SET `voteavg`=$newVote, `votes`=$newVoteCount WHERE id = $item;";
$updateVoteResult = mysql_query($updateVoteQuery);

echo "$newVote";
}

mysql_close($connection);
?>
</body>
</html>

y cuando abro el archivo displaystars.php me da el siguiente error:

en que le estoy errando?
hay alguna manera más sencilla?
(he creado una bd, más no hice ninguna tabla...)

Avatar810 · #2 (**permalink**) 13/01/2009, 16:45

1. Tienes 2 veces definida la misma funcion de php
2. Dentro de una funcion de php no puedes imprimir una etiqueta HTML (hasta donde yo tengo entendido); debes mandar un echo de la etiqueta echo " <img srv......> "
3. No cerraste las comillas de la primer linea de tu función function displayRating($item) (la segunda definicion)

saludos

martuanez · #3 (**permalink**) 13/01/2009, 18:31

Cita:

<html>

<head><style type="text/css">
.starOn{
background-image: url("/images/full-star.gif");
background-repeat: no-repeat;
width: 10px;
height: 10px;
}
.starOff{
background-image: url("/images/clear-star.gif");
background-repeat: no-repeat;
width: 10px;
height: 10px;
}
</style>
<title></title>
</head>

<body>

<?php
include_once("vote.php");

function displayRating($item)
{
echo "<html><div id=\"processingDiv-$item\" style=\"display:none\">""\n";

echo "<img src="ajax-loader.gif"></div>";

echo "<table border=\"0\" cellpadding=\"0\" cellspacing=\"0\"><tr>\n";
for ($i=1; $i<=10; $i++)
{
if ($i == 1) $class = "starOn"; else $class = "starOff";
echo "<td>\n";
echo "<div class=\"$class\" id=\"ratings-$item-$i\" onmouseout=\"javascript:HoverStars('$item', 1)\" onmouseover='javascript:HoverStars('$item', $i)\" onmouseup=\"javascript:SubmitVote($i, '$item')\"></div>\n";
echo "</td>\n";
}
echo "</tr></table></html>\n";

}

?>
<script type="text/javascript">
function ajaxSubmit(url, processingDiv, targetDiv)
{
targetArea = document.getElementById(targetDiv);
processingArea = document.getElementById(processingDiv);

var xmlHttp;
try
{ xmlHttp=new XMLHttpRequest(); }
catch (e)
{
try
{ xmlHttp=new ActiveXObject('Msxml2.XMLHTTP'); }
catch (e)
{
try
{ xmlHttp=new ActiveXObject('Microsoft.XMLHTTP'); }
catch (e)
{
alert('Your browser does not support AJAX!');
return false;
}
}
}

xmlHttp.onreadystatechange=function()
{
if(xmlHttp.readyState==4)
{
processingArea.style.display = 'none';
targetArea.innerHTML = xmlHttp.responseText;
}
}

processingArea.style.display = 'block';
xmlHttp.open('GET',url,true);
xmlHttp.send(null);
}

function SubmitVote(vote, item)
{
var poststr = 'vote.php' +
'?item=' + item +
'&vote=' + vote;

LockStars(item, vote);
ajaxSubmit(poststr, 'processingDiv-'+item, 'ratingDiv-'+item);
}

function HoverStars(item, star)
{
var starCount;
for (starCount=1; starCount<=star; starCount++)
document.getElementById('ratings-'+item+'-'+starCount.toString()).className = 'starOn';
for (starCount=star+1; starCount<=10; starCount++)
document.getElementById('ratings-'+item+'-'+starCount.toString()).className = 'starOff';
}

function LockStars(item, star)
{
var starCount;
for (starCount=1; starCount<=star; starCount++)
{
document.getElementById('ratings-'+item+'-'+starCount.toString()).className = 'starOn';
document.getElementById('ratings-'+item+'-'+starCount.toString()).onmouseover = null;
document.getElementById('ratings-'+item+'-'+starCount.toString()).onmouseout = null;
document.getElementById('ratings-'+item+'-'+starCount.toString()).onmouseup = 'javascript:void(0);';
}
for (starCount=star+1; starCount<=10; starCount++)
{
document.getElementById('ratings-'+item+'-'+starCount.toString()).className = 'starOff';
document.getElementById('ratings-'+item+'-'+starCount.toString()).onmouseover = null;
document.getElementById('ratings-'+item+'-'+starCount.toString()).onmouseout = null;
document.getElementById('ratings-'+item+'-'+starCount.toString()).onmouseup = 'javascript:void(0);';
}
}
</script>

</body>

</html>

Arreglé algo de lo que me dijiste pero igual me parece que le estoy errando en algo más, o no entendí bien algo...

Avatar810 · #4 (**permalink**) 14/01/2009, 09:39

En el img que agregaste como php tienes error de comillas

martuanez · #5 (**permalink**) 18/01/2009, 11:09

ya lo tengo gracias!!