الويب العربي - درس عمل نظام تصويت اجاكس

هذا درس مختصر عن اساسيات عمل نظام تصويت كامل بالاجاكس

سأبدأ بالملفات المطلوبة والاكواد ثم اتبعها بالشرح باذن الله

اولا : ملف مكتبة الجافا اسكربت الشهيرة 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