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

**Cappuccino** · 19-08-2009, 06:58 AM

بسم الله الرحمن الرحيم

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

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

اولا : ملف مكتبة الجافا اسكربت الشهيرة jquery

http://jqueryjs.googlecode.com/files/jquery-1.3.2.js

ثانيا : صورة التحميل

loading.gif

ثالثا : صورة الاضافة

plus.png

اكواد قاعدة البيانات

كود:

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

1- شرح قاعدة البيانات البيانات

2- شرح ملف اضافة تصويت 1

Vexard · 19-08-2009, 10:57 AM

تسلم ايديك عمل رائع

ajax man · 19-08-2009, 02:23 PM

اخي لا اريد هذة

$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!');

لدي ملف اتصال كيف اربطها به بدلا من الاتصال الجديد

**Cappuccino** · 19-08-2009, 05:22 PM

اقتباس:

الكاتب : Vexard

تسلم ايديك عمل رائع

شكرا اخي

**Cappuccino** · 19-08-2009, 05:43 PM

اقتباس:

الكاتب : ajax man

اخي لا اريد هذة

$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!');

لدي ملف اتصال كيف اربطها به بدلا من الاتصال الجديد

بتستخدم mysql ولا mysqli؟

**Cappuccino** · 19-08-2009, 09:50 PM

اولا : قواعد البيانات

**Cappuccino** · 20-08-2009, 11:16 AM

ثانيا : ملف add_poll.php

اولا : كود HTML

يهمنا فيه جزئين

الاول : جزء الفورم

والثاني : الجافا سكربت

جزء الفورم :

كود هتمل:

 <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;"/>
</form>

وهذا تحليلها

ثانيا : كود الجافا اسكربت

كود:

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>');
});

كود:

var i = 2

اعلان متغير i بقيمة 2 ، وهي قيمة مساوية لعدد حقول خيارات التصويت المبدأية في الفورم السابق

كود:

$('#add_poll').click(function(){

دالة يتم تنفيذها عن الضغط على العنصر الذي يحمل id : add_poll وهو هنا علامة الاضافة

كود:

++i;

بالضغط على الاضافة ، يتم اولا زيادة المتغير الذي يحتوي على عدد حقول الخيارات

كود:

$(".poll:last").after()

كود تابع لمكتبة jquery يدخل قيمة بعد اخر عنصر يحمل class : poll

اي انه سيحقن الكود بين القوسين ، بعد كود اخر خيار في الفورم

والكود بين القوسين

كود:

"<div>Option " + i + ' : <input type="text" name="poll' + i + '" maxlength="64" size="40" class="poll"/></div>'

، هو كود عادي تماما مع ملاحظة ان اسم الحقل ، تم اضافة i اليه ، وهي تحمل قيمة تزداد بكل اضافة جديدة ، وبالتالي مع كل اضافة يحمل الحقل الجديد اسم poll3, poll4, poll5 ,... وهكذا

كود:

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;
   }
}

كود للتأكد من ملأ جميع الحقول عند الضغط على add
شرحه الاخ عبد الواحد في موضوع يغني عن اعادته

ajax man · 20-08-2009, 01:15 PM

mysql
+
انا لدي ملف config + connect
واريد ربطها معاً يعني لا يجب علي ان اعمل اتصال جديد كيف اعملها بوايطة دالة
require_once("include/connect.php");
require_once("include/function.php");
require_once("include/config.php");
بدل الاتصال

**Cappuccino** · 20-08-2009, 02:20 PM

اقتباس:

الكاتب : ajax man

mysql
+
انا لدي ملف config + connect
واريد ربطها معاً يعني لا يجب علي ان اعمل اتصال جديد كيف اعملها بوايطة دالة
require_once("include/connect.php");
require_once("include/function.php");
require_once("include/config.php");
بدل الاتصال

اخي المثال يستعمل mysqli [mysql improved]

وهناك شروح وافية لها في قسم قواعد البيانات للاخ بلال كيالي

محمد الشرقاوي · 20-08-2009, 06:21 PM

السلام عليكم،
شكرا لك أخي على الموضوع ، بس لا يمكن استخدام شيئ غير فاهمين معناه،
يريت لو كان هناك شرح،
تحياتي.

**Cappuccino** · 20-08-2009, 07:17 PM

اقتباس:

الكاتب : محمد الشرقاوي

السلام عليكم،
شكرا لك أخي على الموضوع ، بس لا يمكن استخدام شيئ غير فاهمين معناه،
يريت لو كان هناك شرح،
تحياتي.

اخي الشرح في المشاركات

mezzey · 21-08-2009, 12:42 AM

درس حلو تسلم

falas6eeni · 30-09-2009, 05:11 PM

سكربت اكثرمن رائع بعد التجربة .. ولكن ممكن حد يقلي ازاي ممكن اطورو بحيث انه ما حدش يقدر يصوت أكتر من مرة في يوم واحد ؟؟

لكم تحياتي

19-08-2009, 10:57 AM	#2 (permalink)
Vexard عضو فعال تاريخ الانتساب: 12-11-2007 مشاركات: 383 مستوى السمعة : 3	رد : درس عمل نظام تصويت اجاكس تسلم ايديك عمل رائع

19-08-2009, 02:23 PM	#3 (permalink)
ajax man عضو جديد تاريخ الانتساب: 18-08-2009 مشاركات: 6 مستوى السمعة : 0	رد : درس عمل نظام تصويت اجاكس اخي لا اريد هذة $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!'); لدي ملف اتصال كيف اربطها به بدلا من الاتصال الجديد

19-08-2009, 09:50 PM	#6 (permalink)
Cappuccino مشرف تاريخ الانتساب: 12-12-2008 المكان: قاهرة المعز - مصر ارض الكنانة السن: 22 مشاركات: 1,127 مستوى السمعة : 3	رد : درس عمل نظام تصويت اجاكس اولا : قواعد البيانات __________________ Back From Hurghada مكتبة مراجع وكتب بي اتش بي مكتبة مراجع وكتب جافا اسكربت NuSphere phpED 5.6.5615 /// Zend Studio for Eclipse Professional 6.1 /// EMS SQL Manager for MySQL Lynda PHP and MySQL Essential Training - Video

20-08-2009, 11:16 AM	#7 (permalink)
Cappuccino مشرف تاريخ الانتساب: 12-12-2008 المكان: قاهرة المعز - مصر ارض الكنانة السن: 22 مشاركات: 1,127 مستوى السمعة : 3	رد : درس عمل نظام تصويت اجاكس ثانيا : ملف add_poll.php اولا : كود HTML يهمنا فيه جزئين الاول : جزء الفورم والثاني : الجافا سكربت جزء الفورم : كود هتمل: <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;"/> </form> وهذا تحليلها ثانيا : كود الجافا اسكربت كود: 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>'); }); كود: var i = 2 اعلان متغير i بقيمة 2 ، وهي قيمة مساوية لعدد حقول خيارات التصويت المبدأية في الفورم السابق كود: $('#add_poll').click(function(){ دالة يتم تنفيذها عن الضغط على العنصر الذي يحمل id : add_poll وهو هنا علامة الاضافة كود: ++i; بالضغط على الاضافة ، يتم اولا زيادة المتغير الذي يحتوي على عدد حقول الخيارات كود: $(".poll:last").after() كود تابع لمكتبة jquery يدخل قيمة بعد اخر عنصر يحمل class : poll اي انه سيحقن الكود بين القوسين ، بعد كود اخر خيار في الفورم والكود بين القوسين كود: "<div>Option " + i + ' : <input type="text" name="poll' + i + '" maxlength="64" size="40" class="poll"/></div>' ، هو كود عادي تماما مع ملاحظة ان اسم الحقل ، تم اضافة i اليه ، وهي تحمل قيمة تزداد بكل اضافة جديدة ، وبالتالي مع كل اضافة يحمل الحقل الجديد اسم poll3, poll4, poll5 ,... وهكذا كود: 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; } } كود للتأكد من ملأ جميع الحقول عند الضغط على add شرحه الاخ عبد الواحد في موضوع يغني عن اعادته __________________ Back From Hurghada مكتبة مراجع وكتب بي اتش بي مكتبة مراجع وكتب جافا اسكربت NuSphere phpED 5.6.5615 /// Zend Studio for Eclipse Professional 6.1 /// EMS SQL Manager for MySQL Lynda PHP and MySQL Essential Training - Video قام بآخر تعديل Cappuccino يوم 20-08-2009 في 11:18 AM

20-08-2009, 01:15 PM	#8 (permalink)
ajax man عضو جديد تاريخ الانتساب: 18-08-2009 مشاركات: 6 مستوى السمعة : 0	رد : درس عمل نظام تصويت اجاكس mysql + انا لدي ملف config + connect واريد ربطها معاً يعني لا يجب علي ان اعمل اتصال جديد كيف اعملها بوايطة دالة require_once("include/connect.php"); require_once("include/function.php"); require_once("include/config.php"); بدل الاتصال

20-08-2009, 06:21 PM	#10 (permalink)
محمد الشرقاوي عضو نشيط تاريخ الانتساب: 26-07-2009 مشاركات: 59 مستوى السمعة : 1	رد : درس عمل نظام تصويت اجاكس السلام عليكم، شكرا لك أخي على الموضوع ، بس لا يمكن استخدام شيئ غير فاهمين معناه، يريت لو كان هناك شرح، تحياتي.

21-08-2009, 12:42 AM	#12 (permalink)
mezzey عضو جديد تاريخ الانتساب: 11-11-2008 مشاركات: 29 مستوى السمعة : 0	رد : درس عمل نظام تصويت اجاكس درس حلو تسلم

30-09-2009, 05:11 PM	#13 (permalink)
falas6eeni عضو جديد تاريخ الانتساب: 29-07-2009 مشاركات: 37 مستوى السمعة : 0	رد : درس عمل نظام تصويت اجاكس سكربت اكثرمن رائع بعد التجربة .. ولكن ممكن حد يقلي ازاي ممكن اطورو بحيث انه ما حدش يقدر يصوت أكتر من مرة في يوم واحد ؟؟ لكم تحياتي

زوار هذا الموضوع الآن : 3 (0 عضو و 3 ضيف)

أدوات الموضوع
عرض صفحة الطباعة إرسال هذه الصفحة إلى صديق
طريقة العرض	تقييم هذا الموضوع
عادي متطور شجري	تقييم هذا الموضوع:

مواضيع ذات صلة
الموضوع	الكاتب	المجلس	المشاركات	المشاركة الأخيرة
موقع سكربتات وكودات اجاكس	ameed	أجاكس AJAX	12	10-03-2010 07:39 PM
كود اجاكس	eng.ahmed.foogi	مشاكل وحلول PHP Errors & Troubleshooting	1	10-08-2009 01:23 PM
مصدر تعلم اجاكس	kampa	مشاكل وحلول PHP Errors & Troubleshooting	1	28-10-2008 02:32 AM
مشكلة مشكلة في دالة nl2br مع اجاكس	محمد ديوب	مشاكل وحلول PHP Errors & Troubleshooting	11	13-08-2008 07:49 AM

الاسم		حفظ ؟
كلمة المرور