هذا درس مختصر عن اساسيات عمل نظام تصويت كامل بالاجاكس
سأبدأ بالملفات المطلوبة والاكواد ثم اتبعها بالشرح باذن الله
اولا : ملف مكتبة الجافا اسكربت الشهيرة jquery
http://jqueryjs.googlecode.com/files/jquery-1.3.2.js
ثانيا : صورة التحميل
ثالثا : صورة الاضافة
اكواد قاعدة البيانات
كود:
CREATE TABLE IF NOT EXISTS `polls` (
`id` int(12) NOT NULL AUTO_INCREMENT,
`poll_title` varchar(255) NOT NULL,
`parent_id` int(12) NOT NULL,
`votes` int(50) NOT NULL,
PRIMARY KEY (`id`)
) CHARSET=utf8;
CREATE TABLE IF NOT EXISTS `poll_main` (
`id` int(10) NOT NULL AUTO_INCREMENT,
`title` varchar(255) NOT NULL,
`total_votes` int(50) NOT NULL,
PRIMARY KEY (`id`)
) CHARSET=utf8;
اكواد البي اتش بي
اولا : ملف الاضافة
add_poll.php
كود PHP:
<?php
$SQL_HOST = 'localhost';
$SQL_USER = 'root';
$SQL_PASS = '';
$SQL_DB = 'poll';
$MySQLi = new mysqli($SQL_HOST, $SQL_USER, $SQL_PASS, $SQL_DB);
if(mysqli_errno($MySQLi))
exit('Database Error!');
if($_POST['title'] && $_POST['poll1'] && $_POST['poll2'])
{
foreach($_POST as $post)
{
if($post == "" || $post == null)
header("location: {$_SERVER['PHP_SELF']}");
}
$query_insert_main_poll = "INSERT INTO poll_main VALUES (NULL , '". $MySQLi->real_escape_string($_POST['title']) ."', 0)";
$MySQLi->query($query_insert_main_poll);
$parent_id = $MySQLi->insert_id;
$query_polls = "INSERT INTO polls VALUES ";
foreach(array_keys($_POST) as $key)
{
if(strpos($key, "poll") > -1)
{
$poll_title = $MySQLi->real_escape_string($_POST[$key]);
$query_polls .= "(NULL, '$poll_title', $parent_id, 0), ";
}
}
$query_polls = substr($query_polls, 0, (strlen($query_polls) - 2));
$MySQLi->query($query_polls);
if(mysqli_error($MySQLi))
echo "Database Error!";
else
{
exit('Successfully added!<br />You will be redirected back<meta http-equiv="refresh" content="2;url=add_poll.php">');
}
}
?>
<!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" />
<style type="text/css">
.plus{
border:thin #999999 solid;
padding:1px;
cursor: pointer;
}
.plus:hover{
border:thin black solid;
padding:1px;
background-color:#CCCCCC;
}
</style>
<script type="text/javascript" src="jquery-1.3.2.js"></script>
<title>Add Poll</title>
</head>
<body style="font-family:tahoma">
<fieldset style="width:50%">
<legend>Add Poll</legend>
<form onsubmit="javascript:return submiT()" method="post" name="POLL">
<span >Poll Title : <input type="text" name="title" maxlength="64" size="40"/></span>
<div style="padding-left:30px;padding-top:10px">
<div>Option 1 : <input type="text" name="poll1" maxlength="64" size="40" class="poll"/></div>
<div>Option 2 : <input type="text" name="poll2" maxlength="64" size="40" class="poll"/></div>
<img src="plus.png" id="add_poll" class="plus"/><br />
<input type="submit" value="Add Poll" style="margin-left:250px;margin-top:8px;"/>
</fieldset>
</form></div>
</div>
<script type="text/javascript">
var i = 2;
$('#add_poll').click(function(){
++i;
$(".poll:last").after("<div>Option " + i + ' : <input type="text" name="poll' + i + '" maxlength="64" size="40" class="poll"/></div>');
});
function submiT()
{
var x = 0;
for(var i = 0; i < document.POLL.elements.length; ++i)
{
if(document.POLL.elements[i].value == "")
x = 1;
}
if(x == 0)
return true;
else
{
alert("Fill All Boxes");
return false;
}
}
</script>
</body></html>
ثانيا : الملف الرئيسي
index.php
كود PHP:
<!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" />
<script type="text/javascript" src="jquery-1.3.2.js"></script>
<title>Poll</title>
</head>
<body style="font-family:tahoma">
<?php
$SQL_HOST = 'localhost';
$SQL_USER = 'root';
$SQL_PASS = '';
$SQL_DB = 'poll';
$MySQLi = new mysqli($SQL_HOST, $SQL_USER, $SQL_PASS, $SQL_DB);
if(mysqli_errno($MySQLi))
exit('Database Error!');
$query = "SELECT id, title FROM poll_main ORDER BY id DESC LIMIT 1";
$result = $MySQLi->query($query);
if(mysqli_error($MySQLi))
exit(mysqli_error($MySQLi));
if($result->num_rows <1)
exit("No Polls Found!");
$row = $result->fetch_array(MYSQLI_NUM);
$parent_id = $row[0];
$poll_title = $row[1];
$query = "SELECT id, poll_title FROM polls WHERE parent_id = $parent_id";
$result = $MySQLi->query($query);
if(mysqli_error($MySQLi))
exit(mysqli_error($MySQLi));
if($result->num_rows <1)
exit("No Polls Found!");
else
$rows_count = $result->num_rows;
while($row = $result->fetch_array(MYSQLI_ASSOC))
{
$poll_ids[] = $row['id'];
$poll_titles[] = $row['poll_title'];
}
echo "<h3>$poll_title</h3><div class='poll_options'>";
echo '<form action="javascript:vote();" method="post">';
for($i = 0; $i < $rows_count; ++$i)
{
echo'<input type="radio" ';
if($i == 0) echo 'checked="checked"';
echo 'name="poll" value="' . $poll_ids[$i] . '" id="poll"/>' .$poll_titles[$i] . '<br />';
}
echo "<div class='poll_btn'><input type='submit' class='btn' value='Vote!'/></div></form>";
?>
<img id="loading" src="loading.gif" style="display:none"/>
<script type="text/javascript">
var Poll = '<?php echo $poll_ids[0]?>';
$('input[type="radio"]').click(function(){
Poll = $(this).val();
});
function vote()
{
$('.btn').attr('disabled', 'disabled');
$('#loading').css('display', 'inline');
$.post('result.php',{poll: Poll, parent_id: <?php echo $parent_id?>}, function(data){
$('.btn').attr('disabled', false);
$('#loading').css('display', 'none');
$('.poll_options').css('width', '50%');
$('.poll_options').html(data);
});
}
</script>
ملف جلب النتيجة واحتساب التصويت ، يتم استدعائه بتقنية الاجاكس
result.php
كود PHP:
<?php
if($_POST['poll'] && $_POST['parent_id'])
{
$SQL_HOST = 'localhost';
$SQL_USER = 'root';
$SQL_PASS = '';
$SQL_DB = 'poll';
$MySQLi = new mysqli($SQL_HOST, $SQL_USER, $SQL_PASS, $SQL_DB);
if(mysqli_errno($MySQLi))
exit('Database Error!');
$query = "UPDATE polls SET votes = votes + 1 WHERE id = " . $MySQLi->real_escape_string($_POST['poll']) . ";";
$MySQLi->query($query);
if(mysqli_error($MySQLi))
exit(mysqli_error($MySQLi));
$query = "UPDATE poll_main SET total_votes = total_votes + 1 WHERE id = " . $MySQLi->real_escape_string($_POST['parent_id']);
$MySQLi->query($query);
if(mysqli_error($MySQLi))
exit(mysqli_error($MySQLi));
$query = "SELECT total_votes FROM poll_main WHERE id = " . $MySQLi->real_escape_string($_POST['parent_id']);
$result = $MySQLi->query($query);
if(mysqli_error($MySQLi))
exit(mysqli_error($MySQLi));
if($result->num_rows <1)
exit("No News Found1");
$row = $result->fetch_array(MYSQLI_NUM);
$total_votes = $row[0];
$parent_id = $MySQLi->real_escape_string($_POST['parent_id']);
$query = "SELECT poll_title, votes FROM polls WHERE parent_id = $parent_id";
$result = $MySQLi->query($query);
while($row = $result->fetch_array(MYSQLI_ASSOC))
{
echo '<div>' . $row['poll_title'] . '</div>';
echo '<table border="0" cellpadding="0" cellspacing="0" width="100%"><tr><td width="80%"><div style="height:10px;background-color:blue;width:' . (($total_votes == 0)? 0 : ($row['votes'] * 100) / $total_votes) . '%"></div></td><td style="text-align:left">' . (($total_votes == 0)? 0 : round(($row['votes'] * 100) / $total_votes, 2)) . '%</td></tr></table>';
}
echo "Total Votes : ". $total_votes;
}
else
echo "Error";
?>
انتهت الملفات والاكواد ، وهذه جميعا مضغوطة في ملف واحد
POLL.zip
درس عمل نظام تصويت اجاكس - من شرحي
النمط المتتابع
