[تطبيق أجاكس] تصويت باستخدام الاجاكس

**سعد السيد احمد** · 05-10-2008

بسم الله الرحمن الرحيم
كل عام و أنتم بخير
اليوم ببدأ تطبيق من عدة تطبيقات رح أكتبها بنفسي خلال الأيام القادمة وبما إنها أول مشاركة لي أحب أبدأ بهذه المقدمة
مقدمة:
انا من حوالي 3 سنين بديت أتعلم php و كان موقع سوالف سوفت له فضل كبير علي من الدروس و التطبيقات يلي تصير فيه و الحمد لله استفدت منه الكثير و اليوم برد جزء بسيط من يلي استفدت منه وهو أني اعمل عدد من التطبيقات للاجاكس بعد ما تعلمته من فترة ليست بعيدة لأني لاحظت قلة التطبيقات في هذا القسم و إن شاء الله كلكم تستفيدوا منه و يعجبكم شرحي خاصةً أني اول مرة اعمل درس :1power:
فهذه السلسلة من التطبيقات أهديها لموقع سوالف سوفت وكل عضو إستفدت من مواضيعه و مشاركاته
وحقوق النقل لكل مسلم بشرط كتابة اسمي و المنتدى و رابط الموضوع الأصلي إن أمكن

في بالي الأن هذه ال4 مواضيع :
1- تصويت باستخدام الاجاكس
2-دردشة باستخدام الأجاكس
3-تسجيل عضويات عن طريق الاجاكس
4-تسجيل دخول عن طريق الأجاكس
و إذا خلصتهم ببدأ أقكر في غيرهم إن أمكن
طبعا التطبيقات موجهة لمين هم في بداية الأجاكس أو مين يحب يزيد معلوماته من أصحاب الخبرة

وطبعا لازم يكون على علم بالphp و javascript يلي رح يتابع التطبيق لأني مارح أضيع الوقت في شرح أوامر الphp و الjava script
و أعذروني على أي خطأ يقع بغير قصد

بسم الله أبدا التطبيق الأول : تصويت أجاكسي

1- السكربت الرئيسي:
في البداية نحتاج إلى إنشاء ثلاث ملفات هي:
أ-display.htm (سوف تكون الصفحة الرئيسية التي يتم فيها التصويت)
ب-poll.js (ملف الجافا سكربت الذي سوف يتضمن داخل display.htm)
ج- poll_vote.php (الملف الذي سوف يقوم بإستقبال التصويت و طباعة النتائج)
وسوف نقوم بإضافة جدول في قاعدة البيانات لكي يخزن نتائج التصويت :

كود:

CREATE TABLE `poll` (
  `id` int(11) NOT NULL auto_increment,
  `number1` int(11) NOT NULL,
  `number2` int(11) NOT NULL,
  `number3` int(11) NOT NULL,
  PRIMARY KEY  (`id`)
) ENGINE=MyISAM

و ندخل التسجيل التالي :

كود:

INSERT INTO `poll` VALUES (1, 0, 0, 0);

الان نأتي لكتابة الملف الأول (display.htm) نقوم بكتابة الهيد و أكواد الxhtml الأساسية و لا ننسى أن نضع جلب ل poll.js :

كود HTML:

<!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>POLL</title>
<script src="poll.js"></script> 
</head>

نكمل الملف الأن بإضافة ال(inputs) من نوع (radio) داخل div نعطيه id=poll وهذا رح يفيدنا في تغيير المحتوى لاحقاً .طبعا رح تلاحظوا أني مارح اهتم بالمحتوى بتركها لكم تحطوا السؤال يلي تريدون وحتى الشكل نفس الشي .المهم هو شرح طريقة التصويت بالاجاكس:

كود HTML:

<body><div id="poll">
<h2>[Question]</h2><form>
   <p>[Number 1]: 
    <input type="radio"  id="vote1" name="vote" 
value="1" />
      <br />
    [Number 2]: 
    <input type="radio"  id="vote2" name="vote" 
value="2" />
      <br />
    [Number 3]: 
    <input type="radio"  id="vote3" name="vote" 
value="3" />
</p>
</form>
</div><br /><div style="z-index:3" class="smallfont" align="center">Search Engine Optimization by <a rel="nofollow" href="http://www.crawlability.com/vbseo/">vBSEO</a> 3.1.0</div><br /><div style="z-index:3" class="smallfont" align="center">Search Engine Optimization by <a rel="nofollow" href="http://www.crawlability.com/vbseo/">vBSEO</a> 3.1.0</div></body>
</html>

بتلاحظا كيف إننا انشئنا ثلاث إختيارات و عطيناه الاسم vote و قيمة كل إختيار (value) هي التي رح تحدد الإختيار يلي تم إختياره من المستخدم
بقي شيء واحد في هذا الملف وهو إضافة الحدث (event) عند النقر على الخيار سوف يتم تنفيذ أمر الجافا سكربت الخاص بتسجيل التصويت. إذا نضيف :
onClick="getVote(this.value)"
إلى داخل التاج الخاص بخيار التصويت حيث عند الضغط يشتغل العملية ( function) بإسم (getVote) و يرسل للعملية قيمة الحقل أيضاً
يصبح الملف كاملاً:

كود HTML:

<!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>POLL</title>
<script src="poll.js"></script> 
</head>
<body>
<div id="poll">
<h2>[Question]</h2>
<form>
  <p>[Number 1]: 
    <input type="radio" onClick="getVote(this.value)" id="vote1" name="vote" value="1" />
      <br />
    [Number 2]: 
    <input type="radio" onClick="getVote(this.value)"   id="vote2" name="vote" value="2" />
      <br />
    [Number 3]: 
    <input type="radio" onClick="getVote(this.value)"  id="vote3" name="vote" value="3" />
</p>
</form>
</div></body>
</html>

الأن نأتي للملف الثاني poll.js و نضيف أولا العملية (function) الشهيرة يلي اشتغل بالأجاكس أكيد رح تكون مرت عليه و عملها هو التأكد من ان المتصفح يدعم الأجاكس و تحديد الكيفية حيث أن Firefox, Opera 8.0+, Safari تستخدم XMLHttpRequest() أما Internet Explorer يستخدم إما ActiveXObject("Msxml2.XMLHTTP") أو ActiveXObject("Microsoft.XMLHTTP") على حسب بعض الإصدارات
المهم هذا هو الفنكشن :

كود:

 
function GetXmlHttpObject()
{
var xmlHttp=null;
try
  {
  // Firefox, Opera 8.0+, Safari
  xmlHttp=new XMLHttpRequest();
  }
catch (e)
  {
  // Internet Explorer
  try
    {
    xmlHttp=new ActiveXObject("Msxml2.XMLHTTP");
    }
  catch (e)
    {
    xmlHttp=new ActiveXObject("Microsoft.XMLHTTP");
    }
  }
return xmlHttp;
}

الان رح نضيف الفنكشن الثاني (getVote) يللي رح ينفذ عند الضغط على خيار التصويت :

كود:

 
var xmlHttp
function getVote(int)
{
 
xmlHttp=GetXmlHttpObject()
if (xmlHttp==null)
 {
 alert ("Your browser do not support HTTP Request")
 return
 } 
var url="poll_vote.php"
url=url+"?vote="+int
url=url+"&sid="+Math.random()
xmlHttp.onreadystatechange=stateChanged 
xmlHttp.open("GET",url,true)
xmlHttp.send(null)
}

طبعا اول شي في الفنكشن رح يقوم بتنفيذ عملية التحقق يلي كتبناها و يعطي تحذير إذا كان المصفح لا يدعم الاجاكس و يخرج من العملية حينها :

كود:

 
xmlHttp=GetXmlHttpObject()
if (xmlHttp==null)
{
alert ("Your browser do not support HTTP Request")
return
}

بعد ما يتأكد ان المتصفح يدعم الأجاكس و كل شي تمام نجي لتركيب عنوان الصفحة يلي رح ترسل لها البيانات و يستقبل منها النتائج أيضاَ :

كود:

 
var url="poll_vote.php"
url=url+"?vote="+int
url=url+"&sid="+Math.random()

مثل مو ملاحظين ان المتغير يلي استقبله الفنكش (int) هو يلي رح يرسل على شكل GET حتى تستقبله صفحة poll_vote.php
وممكن البعض يتسائل ليش أضفنا متغير ثاني للصفحة وهو (sid) و عطيناه قيمة غير ثابتة تتغير كل مرة (Math.random()) ؟؟
أنا لاحظت في كثير من تمارين و دروس الأجاكس إضافة متغير مثله خاصةً في اللتي ما يكون فيها إرسال بيانات متغير و غير ثابتة (مثل تطبيقنا ) أما في البيانات الغير ثابتة مثل (إرسال نصوص ) ففي بعض الاحيان لا يكون موجود و حاولت أبحث عن السبب لكن ما وجدت حتى جربت أشيله بنفسي و لاحظت انه بعد ما شلته فتبين ان المتصفح صار يطبع دائما نفس النتيجة و كأنك شغال في وضع (غير متصل ) وكل ما أرسل بيانات ما يتغير شي و تجيني النتائج القديمة فهذا الكود حتى ما يظل عنوان الصفحة ثابت بالنسبة للمتصفح وممكن في بعض المتصفحات يشتغل كل شي تمام بدونه لكن أنا جربته كثير و على هذا التمرين أيضا و فعلا صارت المشكلة نفسها لما شلته المهم أي واحد يجرب يشيله و يشوف النتائج كيف

بالنسبة لأخر 3 سطور هي عملية الإرسال و الإستقبال يلي تصير حيث :
xmlHttp.onreadystatechange=stateChanged
هذا حتى يقوم بتشغيل العملية (function) stateChanged عند الحصول على نتائج من الصفحة المرسل لها البيانات ويلي يحب يعرف أكثر عنها :

The onreadystatechange property stores your function that will process the response from a server. This is not a method, the function is stored in the property to be called automatically.
خلاصتها انها عملية تعالج الرد من السيرفر مافي داعي لفلسفات زايدة

و في :

كود:

 
xmlHttp.open("GET",url,true)
xmlHttp.send(null)

نستخدم open() و send() لإرسال طلبنا للسيرفر و الopen() تأخذ ثلاث قيم : الأولى لتحديد طريقة إرسال البيانات (GET أو POST ) و الثاني لعنوان الصفحة و هنا عطينها المتغير url يلي أنشئنها و الثالث يحدد إذا كان الطلب تريده أنه يعالج بشكل لا توافقي ام لا
الأن بقي شي وحد و أخير نضيفه في ملف الجافا سكربت (poll.js) وهو العملية الي رح تنفذ عند :

كود:

xmlHttp.onreadystatechange=stateChanged

نضيف :

كود:

function stateChanged() 
{ 
 
 if (xmlHttp.readyState==4 || xmlHttp.readyState=="complete")
 { 
 document.getElementById("poll").innerHTML=xmlHttp.responseText;
 } 
}

عند وصول الرد من الصفحة الفنكشن هذا سوف ينفذ وملاحظين الشرط إنه إذا كانت xmlHttp.readyState تساوي 4 أو complete طبعا البعض رح يبدا يتسائل ليش 4 ؟؟ رح اوضح لكم:
هذا ال readyState يتغير في كل مرة على حسب إرسال ووصول البيانات و في كل مرة يتغير تشتغل ال onreadystatechange وممكن يحمل قيم من 0 إلى 4 على حسب حالة إرسال و إستقبال البيانات و هي :
0 = The request is not initialized
1 = The request has been set up
2 = The request has been sent
3 = The request is in process
4 = The request is complete
0 تعني أن الطلب لم يشغل بعد
1 تعني الطلب بدأ
2 الطلب أرسل
3 الطلب في العملية
4 الطلب إكتمل
وطبعاً هذي رح تفيدنا بعدين في (الإضافات) لما رح نعمل ال (loading) المهم نخليها لبعدين . نحنة رح نهتم الأن إذا كانت تساوي 4 أو complete (أنا شفت في بعض التطبيقات يحط الcomplete أيضا ممكن لان بعض المتصفحات ما تعطي 4 بل complete فلذلك للأمان نضع الشرطين )فعند إكتمال وصول البيانات يتم إستبدال الdiv يلي عملناه في الصفحة الأساسية و إستطعنا تحديده عن طريق ال id بالبيانات المستقبلة (xmlHttp.responseText) حيث تمثل البيانات اللي رح تطبع في صفحة إستقبال البيانات
الان نكون إنتهينا من ملف poll.js
وهذا هوا كامل لمن يريد أن يتأكد أنه جمع كل الاكواد بشكل صحيح :

كود:

 
var xmlHttp
function getVote(int)
{
 
xmlHttp=GetXmlHttpObject()
if (xmlHttp==null)
 {
 alert ("Your browser do not support HTTP Request")
 return
 } 
var url="poll_vote.php"
url=url+"?vote="+int
url=url+"&sid="+Math.random()
xmlHttp.onreadystatechange=stateChanged
xmlHttp.open("GET",url,true)
xmlHttp.send(null)
} 
function stateChanged() 
{ 
 if (xmlHttp.readyState==4 || xmlHttp.readyState=="complete")
 { 
 document.getElementById("poll").innerHTML=xmlHttp.responseText;
 } 
} 
function GetXmlHttpObject()
{
var xmlHttp=null;
try
  {
  // Firefox, Opera 8.0+, Safari
  xmlHttp=new XMLHttpRequest();
  }
catch (e)
  {
  // Internet Explorer
  try
    {
    xmlHttp=new ActiveXObject("Msxml2.XMLHTTP");
    }
  catch (e)
    {
    xmlHttp=new ActiveXObject("Microsoft.XMLHTTP");
    }
  }
return xmlHttp;
}

نأتي الأن للملف الأخير الذي سوف يقوم بإستقبال البيانات و طباعة النتائج (poll_vote.php) (مارح اتوقف فيه واشرح كثير مجرد رؤوس أقلام لانه من المفترض أن تكون على علم بهذه الأوامر

):
أول شي رح نضيف متغير لإستقبال vote على شكل GET :

كود PHP:


$vote = $_GET['vote'];

بعدين رح نعمل إتصال بقاعدة البيانات :

كود PHP:


$host="localhost"; 

$dbname="ajax";

$dbuser="almaster";   

$dbpass=""; 

$con=mysql_connect($host,$dbuser,$dbpass)

or die("CONNECTION FAILED");

mysql_select_db($dbname,$con)

or die("can't connect to DB");

طبعا لا تنسى تغيير المتغيرات بما يتناسب مع قاعدة بيناتك يلي تشتغل عليها
بعدين نعمل إختيار للجدول poll ووضع المتغيرات اللازمة :

كود PHP:


 

  $select=mysql_query("SELECT * FROM poll where id='1' ") or die("can't get poll");

 $row=mysql_fetch_array($select);

 

 $number1 =$row["number1"];

 $number2 =$row["number2"];

 $number3 =$row["number3"];

الأن نجي لفحص قيمة الvote يلي استقبناها ووعمل اللازم على حسب الخيار

(نزود 1 للخيار يلي اختاره المستخدم)

كود PHP:


if ($vote == 1)

 {

 ++$number1;

 }

elseif ($vote == 2)

 {

 ++$number2;

 }

elseif ($vote == 3)

 {

 ++$number3;

 }

باقي إرسال التعديل اللي خلص لقاعدة البيانات :

كود PHP:


$update = ("UPDATE `poll` SET `number1` = '$number1' , `number2` = '$number2' , `number3` = '$number3'   WHERE id='1' ");

$result = mysql_query($update)or die("can't edit poll ");

الان نكون خلصنا من كل عمليات المعالجة و التعديل

. الاكواد مجمعة :

كود PHP:


<?php

$vote = $_GET['vote'];

$host="localhost"; 

$dbname="ajax";

$dbuser="almaster";   

$dbpass=""; 

$con=mysql_connect($host,$dbuser,$dbpass)

or die("CONNECTION FAILED");

mysql_select_db($dbname,$con)

or die("can't connect to DB");

  $select=mysql_query("SELECT * FROM poll where id='1' ") or die("can't get poll");

 $row=mysql_fetch_array($select);

 

 $number1 =$row["number1"];

 $number2 =$row["number2"];

 $number3 =$row["number3"];

 

if ($vote == 1)

 {

 ++$number1;

 }

elseif ($vote == 2)

 {

 ++$number2;

 }

elseif ($vote == 3)

 {

 ++$number3;

 }

$update = ("UPDATE `poll` SET `number1` = '$number1' , `number2` = '$number2' , `number3` = '$number3'   WHERE id='1' ");

$result = mysql_query($update)or die("can't edit poll ");

?>

باقي أن نقوم بطباعة البيانات حتى تعرض و انا رح اعطيكم ياها كاملة يضاف بعد الكود السابق :

كود PHP:


<h2>[Result]:</h2>

<table>

<tr>

<td>[Number 1]:</td>

<td>

<img src="poll.jpg"

width='<?php echo (100*round($number1/($number1+$number2+$number3),2)); ?>'

height='20'>

<?php echo (100*round($number1/($number1+$number2+$number3),2)); echo"% ($number1)";?>

</td>

</tr>

<tr>

<td>[Number 2]:</td>

<td>

<img src="poll.jpg" 

width='<?php echo (100*round($number2/($number1+$number2+$number3),2)); ?>'

height='20'>

<?php echo (100*round($number2/($number1+$number2+$number3),2)); echo"% ($number2)";?>

</td>

</tr>

<tr>

<td>[Number 3]:</td>

<td>

<img src="poll.jpg" 

width='<?php echo (100*round($number3/($number1+$number2+$number3),2)); ?>'

height='20'>

<?php echo (100*round($number3/($number1+$number2+$number3),2)); echo"% ($number3)";?>

</td>

</tr>

</table>

بتلاحظوا إننا رح نحتاج صورة بإسم poll.jpg في نفس المجلد اصنعها بالرسام و حطها بأي لون و الحجم لا يهم لانه رح يحدد بحسب نسبة التصويت يلي حسبنا العرض بالنسبة المؤية عن طريق
(100*round($number1/($number1+$number2+$number3),2))
مثل ما تعرفوا النسبة =( (المراد حساب نسبته)\الكل)*100
وطيعا رح اطبع بعد عدد الأصوات اللي صوت له بجانب النسبة
هكذا نكون خلصنا من السكربت بدون إضافات وما عملنا غير الاوامر اللازمة و الإضافات القليلة

ننتقل للقسم الثاني من التطبيق

2- الإضافات:
في هذا القسم رح اضيف بعض الأشياء يلي رح تحسن السكربت و كل شي خطر على بالي إضافي له إختصاراً للوقت لو جاء واحد وسأل :كيف أضيف..؟ و كيف أعمل...؟

أ- كيف أعمل رسالة الإنتظار (loading) ?

فعلا أعتقد انها مهمة في كل تطبيقات الاجاكس حيث ممكن لبعض المستخدمين خاصةً يلي اتصالهم بطيء بالانترنت ان يواجه مشكلة في عدم معرفة أن الصفحة تقوم بالعمل لإظهار نتائج له (وهذه من عيوب الأجاكس) و طبعا حلها اننا نكتب للمستخدم عبارة (يرجى الإنتظار , تتم المعالجة ) عند تنفيذ بداية تنفيذ الأمر و نخفيها عند الإنتهاء
ومن القسم الماضي كتبت عن ال readyState وكيف ممكن تأخذ القيم من 0 إلى 4 وهذا رح يفيدنا في معرفة إذا تم إستقبال البيانات لطباعتها او لم تنتهي بعد
فنروح للعملية (function) stateChanged() و نضيف شرط :

كود:

 if (xmlHttp.readyState==0 || xmlHttp.readyState==1  || xmlHttp.readyState==2 || xmlHttp.readyState==3)
 { 
 var msg="please wait...";
 document.getElementById("poll").innerHTML=msg;
 }

حيث عندما تكون الreadyState تساوي 0 او 1 او 2 أو 3 (أي لم ينتهي من تنفيذ الطلب ) نقوم بتغيير الdiv يلي حددناها عن طريق الid ب الرسالة يلي حطيتها الان مثالاً please wait...
وطبعا لما يوصل للرقم 4 رح يتم تنفيذ الشرط الأساسي بإستبادل الdiv بالبيانات المطبوعة من الصفحة
ملاحظة: ممكن إختصار الشرط ووضع xmlHttp.readyState!==4 بدال الأربع شروط لكن فضلت أخليه هكذا خوفاً أن تكون بعض المتصفحات تعطي قيمة complete وكمان كبداية حتى يتذكر مين أول مرة يشتغل على الاجاكس وممكن البعض يقوم بوضع مثل نسبة مؤية تزداد كلما إنتقل الreadyState إلى قيمة أكبر حتى تصل إلى 100% كل واحد يجط الأفكار يلي يراها مناسبة

لكن هنا لا أفضل فعملية التصويت ليس فيها إرسال بينات كبيرة حتى نقوم بوضع مثل هذا الشيء يكفي عبارة تطلب الإنتظار

ممكن وضع رسالة الإنتظار في div خاص أسفل الفورم بحيث يطبع رسالة الإنتظار و يبقي الفورم يلي فيه إختيار التصويت على حاله طبعا عن طريق تغيير poll الموجودة في :

كود:

document.getElementById("poll").innerHTML=msg;

ووضع الid للdiv يلي عملته و أكيد لا تنسى أنك تضيف مسح للdiv أو طباعة done عند تحقق شرط مساوات readyState بال4
بخليها لكم يلي يريد أن يعمل هذه الحركة

ب-كيف أعمل رابط لرؤية النتيجة قبل التصويت؟
كل ما عليك تعمل رابط عادي و يكون الرابط ل javascript:getVote() و طبعا هذا رح يخليك تعمل رابط في صفحة النتائج يرجعه للتصويت و طبعا هنا الشغلة رح تحتاج لعملية (function) جديدة حتى تطبع لنا خيارات التصويت و أنا صراحة ما فكرت فيها لذلك بخليها لبعدين إذا عملتها بحطها رد لكم

ج-كيف أمنع شخص من التصويت أكثر من مرة ؟
اعتقد بهذه الإضافة رح اطلع عن الموضوع في شرح الأجاكس لكن بعطي الفكرة العامة تكون بوضع كووكيز لما يتم التصويت و لما يرجع الزائر نفسه يشوف صفحة التصويت يكون فيه شرط يتأكد من الكووكيز و إذا كان صحيح يتم طباعة النتيجة او يطبع خيارات التصويت
و البعض ممكن يقول الكووكيز غير موثوق حيث ممكن الواحد يمسح الكووكيز و يرجع يصوت مرة ثانية بدون مشاكل هنا أقله ممكن تستخدم الip حيث تحفظ آي بي كل شخص يصوت في قاعدة البيانات وتعمل شرط نفس تبع الكووكيز في التأكد

د-أريد أن اضع خيارات التصويت على شكل صور أو مجرد كلام و عند الضغط عليه يتم التصويت فكيكف ؟
بالتاكيد تستطيع عمل ذلكل عن طريق وضع onClick="getVote(this.value)" في المكان الذي تريد أن يضغط عليه ليتم التصويت لكن يجب أن تغير this.value إلى رقم الخيار المراد التصويت له

ه-لا أريد ان يكوت التصويت تلقائياً عند الضغط على الخيار أريد ان يكون هناك زر(ضغطة) "صوت" بعد إختيار الخيار المناسب (مثل الطريقة القديمة في إرسال البيانات دون أجاكس) فكيف ؟؟ :con2:
نعم معك حق وهذا انا نفسي أفضله حيث لازم نعطي المستخدم فرصة تفكير شوي

لكن الطريقة رح يكون فيها تعديلات كبيرة شوي حيث رح نغير العديد من الأوامر لكن بشرحها كاملة :
أول شي نفتح ملف display.htm و نضيف زر الإرسال قبل نهاية الفورم:

كود HTML:

 <input type="submit" name="send" id="send" value="VOTE"  onClick="getVote()" />

لاحظ الحدث الموجود عند الضغط
بعدين لا ننسى إننا نحذف الحدث (event) عند الضغط (onClick) في إختيارات التصويت
نحذف:

كود:

onClick="getVote(this.value)"

فتصبح :

كود HTML:

 <p>[Number 1]: 
    <input type="radio" id="vote1" name="vote" value="1" />
      <br />
    [Number 2]: 
    <input type="radio"   id="vote2" name="vote" value="2" />
      <br />
    [Number 3]: 
    <input type="radio"  id="vote3" name="vote" value="3" />
</p>

الان نروح لملف poll.js و نقوم بتغيير :

كود:

function getVote(int)
{

إلى

كود:

function getVote()
{

حتى نخلصه من المتغير يلي يقدر الواحد يضيفها عليها
بعدين في نفس الفنكشن نضيف :

كود:

var vote1 = document.getElementById('vote1');
var vote2 = document.getElementById('vote2');
var vote3 = document.getElementById('vote3');

حتى نقوم بتحديد الخيارات بحسب الid
الأن لازم أن نقوم بتغيير الurl حيث سوف نرسل 3 متغيرات لاحظوا :

كود:

var url="poll_vote.php"
url=url+"?vote1="+vote1.checked
url=url+"&vote2="+vote2.checked
url=url+"&vote3="+vote3.checked
url=url+"&sid="+Math.random()

عن طريق ال .checked سوف نعرف إذا كان الخيار مختار فيعطينا القيمة : true او غير مختار فيعطي false
ولاننسى نحط شرط إذا لم يحدد المستخدم أحد الخيارات فنقوم بالتنبيه و الخروج من العملية:

كود:

if (vote1.checked==false && vote2.checked==false && vote3.checked==false)
 {
 alert ("You must choose something!")
 return
 }

تصبح الفنكشن كاملة :

كود:

 
function getVote()
{
 
xmlHttp=GetXmlHttpObject()
if (xmlHttp==null)
 {
 alert ("Your browser do not support HTTP Request")
 return
 } 
var vote1 = document.getElementById('vote1');
var vote2 = document.getElementById('vote2');
var vote3 = document.getElementById('vote3');
 if (vote1.checked==false && vote2.checked==false && vote3.checked==false)
 {
 alert ("You must choose something!")
 return
 } 
var url="poll_vote.php"
url=url+"?vote1="+vote1.checked
url=url+"&vote2="+vote2.checked
url=url+"&vote3="+vote3.checked
url=url+"&sid="+Math.random()
xmlHttp.onreadystatechange=stateChanged
xmlHttp.open("GET",url,true)
xmlHttp.send(null)
}

الأن نذهب للملف الأخير poll_vote.php :
ونقوم بالتعديل على مستقبل البيانات لأنه لدينا الأن 3 متغيرات نحتاجها :

كود PHP:


$vote1 = $_GET['vote1'];

$vote2 = $_GET['vote2'];

$vote3 = $_GET['vote3'];

و شرط التأكد و زيادة عدد الأصوات يصبح :

كود PHP:


if ($vote1=='true')

 {

 ++$number1;

 }

elseif ($vote2=='true')

 {

 ++$number2;

 }

elseif ($vote3=='true')

 {

 ++$number3;

 }

هكذا تكون إنتهينا من تحويل طريقة التصويت عن طريق النقر فقط إلى النقر مرة على الخيار ثم على الزر للتأكيد

وبهذا أنهي التطبيق كامل و إن شاء الله يكون الجميع فهمه و إستفاد منه :app:
الان اي واحد عنده سكربت تصويت يقدر يعدل عليه إن أمكن و يخليه أجاكس أو حتى تصنع سكربت التصويت الخاص فيك ليش لأ

عن طريق شويت أفكار إن شاء الله توصل للي تريده
لأي سؤال أو استفسار تفضل
------------------------
إنتظروني في التطبيق القادم : دردشة أجاكسية :nice:
إن شاء الله بحطه بأسرع وقت أول ما أخلصه خلال الأسبوع القادم
ورح أناقش فيه كيف إرسال بيانات عريبة بالاجاكس لأنه إحتمال أستخدم مكتبة jquery (رغم أني لا افضل إستخدام المكتبات) وكيفية عمل الرفرش الاجاكسي
كل هذا إن شاء الله قريباً إذا ما حصل ما يشغلني عنه

**mR Basha** · 05-10-2008

أخي ياريت لو تعطينا كود كامل في ملف مرفق ونكون شاكرين وما تنسى داتا بيس

شحاد وبتشرط

**ahmed-samara** · 05-10-2008

ماشاء الله عليك اخي , الظاهر سنستفيد كما بلغنا الزميل اشرف واتمني لك التوفيق ومازلت متابع للموضوع .... وسوالف تتشرف بمبدعين مثلك وشكرآ

**فارس القبيلة** · 05-10-2008

اخوي ياليت تضع لنا الملفات كامله كمرفقات

وننتظر دروسك القادمه على احر من الجمر

**M. Al-Dhafeeri** · 05-10-2008

الف شكر والله يعطيك العافيه

**سعد السيد احمد** · 05-10-2008

أخي ياريت لو تعطينا كود كامل في ملف مرفق ونكون شاكرين وما تنسى داتا بيس

شحاد وبتشرط

اخوي ياليت تضع لنا الملفات كامله كمرفقات

وننتظر دروسك القادمه على احر من الجمر

بالنسبة لملفات السكربت كاملة انا كنت محضرها و جاهزة لكن مع العجلة نسيت أرفعها متأسف :shy:

الأن أضيفه مع هذا الرد
فيه السكربت مع إضافة : زر(ضغطة) "صوت" يلي شرحت في الإضافات

ماشاء الله عليك اخي , الظاهر سنستفيد كما بلغنا الزميل اشرف واتمني لك التوفيق ومازلت متابع للموضوع .... وسوالف تتشرف بمبدعين مثلك وشكرآ

الف شكر والله يعطيك العافيه

ولو أنا ما عملت شي لسى
و أهم شي أني استمر لأني خائف من أي مشكلة تشغلني عن كتابة الجديد لكن إن شاء الله ما يصير إلا كل خير

**أبو فيصلz** · 05-10-2008

الله يجزااك خير ،،، واصل ابداعاتك

**سعد السيد احمد** · 06-10-2008

الله يجزااك خير ،،، واصل ابداعاتك

إن شاء الله

**مهندس مصرى** · 07-10-2008

جزاك الله خيراً.. سؤال بسيط:
رايت بعض السكربتات تقوم بعمل حركة لشريط التصويت بعد الضغط على "تصويت" فتجد كل شريط يتحرك حركة ملحوظة بسرعة معينة كل حسب نسبته المئوية
فهل يمكن لك عمل هذه الطريقة مع مراعاة اختلاف الالوان لكل خيار
اتمنى ان تكون فهمت قصدي

الجزء الثاني:

ممكن وضع رسالة الإنتظار في div خاص أسفل الفورم بحيث يطبع رسالة الإنتظار و يبقي الفورم يلي فيه إختيار التصويت على حاله طبعا عن طريق تغيير poll الموجودة في :

كود:
document.getElementById("poll").innerHTML=msg;

ووضع الid للdiv يلي عملته و أكيد لا تنسى أنك تضيف مسح للdiv أو طباعة done عند تحقق شرط مساوات readyState بال4
بخليها لكم يلي يريد أن يعمل هذه الحركة

الان لو قمت بعمل div منفصلة اسفل الكود لارسال بالاجاكس لاي شىء بالكود الذي تفضلت بوضعه .. كيف نكتب الكود الذي يخفي ال div عند رجوع نتائج "الحالة 4" ؟؟
للتوضيح يعني "اظهار رسالة النتيجة لفترة 5 ثواني مثلا ثم اخفاء ال div الخاصة بالنتيجة باكملها "

**سعد السيد احمد** · 07-10-2008

رح اجاوب على الجزء الثاني أول :
أنت لما تعمل الdiv الثاني اسفل خيارات التصويت (خارج الdiv الخاص بالخيارات ) وتسميه مثلاً (msg) تصير الفنكشن stateChanged :

كود:

 
 
function stateChanged() 
{ 
 if (xmlHttp.readyState==0 || xmlHttp.readyState==1  || xmlHttp.readyState==2 || xmlHttp.readyState==3)
 { 
 var msg="loading...";
 document.getElementById("msg").innerHTML=msg;
 } 
 if (xmlHttp.readyState==4 || xmlHttp.readyState=="complete")
 { 
  var msg="";
 document.getElementById("msg").innerHTML=msg;
 document.getElementById("poll").innerHTML=xmlHttp.responseText;
 }

كل ماعليك انك تعطي قيمة فاضية للdiv لما الreadyState يساوي 4 أو ممكن تغيرها بكلمة إكتمل التنفيذ (done)

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

أتمنى أن تكون المعلومة وصلت

**مهندس مصرى** · 07-10-2008

جزاك الله خيراً أخي الفاضل وبارك الله فيك
سأحاول معرفة الطريقة ووضعها هنا ان شاء الله حتي يستفيد منها الجميع
شكراً لك

**سعد السيد احمد** · 10-10-2008

ابتكرت هذه الطريقة لجعل شريط التصويت يتحرك بحيث أتحكم في عرض الصورة(الشريط) وزيادته بنسبة ثابتة كل زمن معين حتى يصل للطول الفعلي
أول شي عملت فنكشن واحدة و جمعت فيها الأوامر وحطيت على الصور حدث onload ليشغلوا الفنكشن و يرسلوا لها قيمة الid لكن جتني مشكلة خلتني أعمل لكل صورة فنكشن خاصة فيها لأانه لما كانت واحدة صارت لي عدة مشاكل إما أن الصور يصير لهم نفس العرض أو بس صورة واحدة يلي تتحرك و جربت أغير أسماء المتغيرات و احط شروط على حسب الid لكن مافادت لذلك أخر شي عملت لكل صورة فنكشن خاص فيها و أيضاً متغيرات بأسماء مختلفة و إن شاء الله بس أفضى شوي بشتغل عليها بحيث أجمعهم في فنكشن واحد لكن الان هذا هوا الحل يلي عملته :
تضع في poll.js :

كود:

 
function imgsize1(w1)
{
 w1=document.getElementById(w1)
 oldw1=w1.width;
 neww1=oldw1*0.2;
  var p1 = 1;
  w1.width=0; 
  var actif1 = window.setInterval(function(){ 
  w1.width=neww1*p1; 
    p1++; 
  if(p1 == 6){  
  window.clearInterval(actif1);
   p1 = 1; 
  } 
  },50); 
}
function imgsize2(w2)
{
 w2=document.getElementById(w2) 
 oldw2=w2.width;
 neww2=oldw2*0.2;
  var p2 = 1;
  w2.width=0; 
  var actif2 = window.setInterval(function(){ 
  w2.width=neww2*p2; 
    p2++; 
  if(p2 == 6){  
  window.clearInterval(actif2);
   p2 = 1; 
  } 
  },50); 
}
function imgsize3(w3)
{
 w3=document.getElementById(w3) 
 oldw3=w3.width;
 neww3=oldw3*0.2;
  var p3 = 1;
  w3.width=0; 
  var actif3 = window.setInterval(function(){ 
  w3.width=neww3*p3; 
    p3++; 
  if(p3 == 6){  
  window.clearInterval(actif3);
   p3 = 1; 
  } 
  },50); 
}

وفي poll_vote.php تضع لكل صورة بالترتيب داخل التاج :

كود HTML:

onload="imgsize1(this.id)" id="img1"

كود HTML:

onload="imgsize2(this.id)" id="img2"

كود HTML:

onload="imgsize3(this.id)" id="img3"

بالنسبة لكيفية عمل الفنكش بشرح واحد و الباقي متشابهين لكن غير أسماء للمتغيرات :

كود:

w1=document.getElementById(w1)

اول شي ناخذ متغير و نعطيه document.getElementById(w1) بحيث ما نحتاج لتكرارها كل مرة وw1 هي القيمة المرسلة مع تشغيل الفنكشن و تكون الid الخاص بالصورة

كود:

 oldw1=w1.width;
 neww1=oldw1*0.2;

هنا قمنا بأخذ عرض الصورة ووضعناه في متغيرoldw1
ثم عملنا متغير أخر يحتوي على 20% من العرض الفعلي للصورة oldw1*0.2

كود:

  var p1 = 1;
  w1.width=0;

المتغير p1 رح يفيدنا في عملية التكرار
و في السطر الذي يليه رح نقوم بجعل عرض الصورة صفر حتى تبدأ الصورة بزيادة عرضها من الصفر

كود:

  var actif1 = window.setInterval(function(){ 
  w1.width=neww1*p1; 
    p1++; 
  if(p1 == 6){  
  window.clearInterval(actif1);
   p1 = 1; 
  } 
  },50);

هنا استخدم window.setInterval في التكرار ورح تشتغل كل 50 جزة من الثانية
ولما تشتغل فأول شي رح يتم هو تغيير العرض ليصبح 20% من الطول الأصلي تبعاً للمتغير الذي وضعناه و نضرب في p1 يلي رح تكون قيمته أول شي 1 w1.width=neww1*p1;
ثم يتم زيادته p1++;
وهكذا سوف تستمر الحلقة ويتم زيادة 20% كل 50 جزء من الثانية و سوف تتوقف عند تحقق الشرط :

كود:

 
  if(p1 == 6){  
  window.clearInterval(actif1);
  }

لأنه يكون عندها قد وصلنا للطول الفعلي 100%

هذا كل شي و أنا قمت برفع السكربت لمن يريد أن يرى يجربه فوراً
POLL

**سعد السيد احمد** · 11-10-2008

إعادة تحميل السكربت مع كامل التعديلات التي حصلت حتى الأن في المرفقات
ويلي عنده أي فكرة جديدة أو إقتراح لا يبخل علينا

**مهندس مصرى** · 14-10-2008

رائع المجهود
جزاك الله خيرا

**اللهوب** · 01-03-2009

موضوع قيم

الف شكر

الموضوع: [تطبيق أجاكس] تصويت باستخدام الاجاكس

أدوات الموضوع

بحث في الموضوع

[تطبيق أجاكس] تصويت باستخدام الاجاكس

المواضيع المتشابهه

سلايد شو ديناميكي باستخدام الاجاكس وال php

[تطبيق أجاكس] دردشة باستخدام الاجاكس

[تطبيق أجاكس] تسجيل دخول باستخدام الأجاكس

[تطبيق أجاكس] light box لعرض الصور

كيفية عمل قوائم منسدلة باستخدام الاجاكس

ضوابط المشاركة